読者です 読者をやめる 読者になる 読者になる
記事一覧      日常       音楽       考え       ドラマ       映画       CM       Web

【Web】はてなでイントロドン!

はてなの優秀なサイドバーのなかには、「iTunes商品紹介」っていう機能があって、
音楽とかアプリとかを記事内に貼付けることが出来ます。*1

↓こんなかんじ。

森のくまさん

森のくまさん

  • 東京児童合唱団
  • Children's Music
  • ¥150
  • provided courtesy of iTunes

これ使えばイントロドン的なもの*2が作れるのでは〜とお昼休みに思い立ったので、
簡易的なやつを作ってみた。

【スポンサードリンク】


とりあえず5曲ほど!音量注意!
すべて坂本真綾楽曲という非道さです(^_^)
※再生されない場合、リロードして少しお茶でも飲んで一息入れてから再生ボタンを押してください。

Q.1



Q.2



Q.3



Q.4



Q.5




とまあこんなかんじ。
3分くらい楽しめたらいいな!

いちおうコードを置いておくので、なんかあればご自由にどうぞ〜

javascript

<script type="text/javascript">
$(function(){
    $('audio:eq(0)').attr('id','music1');
    $('audio:eq(1)').attr('id','music2');
    $('audio:eq(2)').attr('id','music3');
    $('audio:eq(3)').attr('id','music4');
    $('audio:eq(4)').attr('id','music5');
});
function audioPlay(no) {
    document.getElementById(no).play();
}
function audioPause(no) {
    document.getElementById(no).pause();
}
function display(no) {
    document.getElementById(no).removeAttribute("style");
}
</script>

記事本文の一番上にいれる。
はてなのサイドバーから貼付けた表記にはidを付与できないので、こっちで勝手に振ってる。
(ただ、このやりかたよりも要素のlengthとってぐるぐるループ回す方がいいかなあ)

HTML

<div id="frame1" style="display:none;">
[https://itunes.apple.com/jp/album/buddy/idXXXXXXX?i=XXXXXXXX&uo=4:embed]
</div>
<input type="button" class="css_btn_class" onclick="audioPlay('music1')" value="再生">
<input type="button" class="css_btn_class" onclick="audioPause('music1')" value="一時停止">
<input type="button" class="css_btn_class" onclick="display('frame1')" value="解答">

2個目からは「frame1→iframe2、music1→music2」へと変える。

CSS

.css_btn_class {
    font-size:12px;
  font-family:Arial;
  font-weight:normal;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  border-radius:8px;
  border:1px solid #dcdcdc;
  padding:9px 18px;
  text-decoration:none;
  background:-moz-linear-gradient( center top, #ededed 84%, #dfdfdf 21% );
  background:-ms-linear-gradient( top, #ededed 84%, #dfdfdf 21% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(84%, #ededed), color-stop(21%, #dfdfdf) );
  background-color:#ededed;
  color:#777777;
  display:inline-block;
  text-shadow:1px 1px 0px #ffffff;
  -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
  -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
  box-shadow:inset 1px 1px 0px 0px #ffffff;
}.css_btn_class:hover {
  background:-moz-linear-gradient( center top, #dfdfdf 84%, #ededed 21% );
  background:-ms-linear-gradient( top, #dfdfdf 84%, #ededed 21% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
  background:-webkit-gradient( linear, left top, left bottom, color-stop(84%, #dfdfdf), color-stop(21%, #ededed) );
  background-color:#dfdfdf;
}.css_btn_class:active {
  position:relative;
  top:1px;

今回使ってるボタンのCSS。
CSS Button Generator - imageless css buttons maker
ボタン自体はここで作りました。
ただ、はてなブログは記事内にCSS書いても適用できないっぽいので、
デザインCSSのとこに書くしかないかも。*3

まあなにを一番伝えたかったかというと、坂本真綾好きな人いたら友達になってくださいということです。
おしまい。
Twitterボタン

*1:なにこの出だし

*2:くまさんを聴けばわかると思うけど、イントロドンになってない曲も多々含まれる

*3:記事内CSSわりと対応してほしかったりする