はてなの優秀なサイドバーのなかには、「iTunes商品紹介」っていう機能があって、
音楽とかアプリとかを記事内に貼付けることが出来ます。*1
↓こんなかんじ。
これ使えばイントロドン的なもの*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.com - このウェブサイトは販売用です! - css-button-generator リソースおよび情報
ボタン自体はここで作りました。
ただ、はてなブログは記事内にCSS書いても適用できないっぽいので、
デザインCSSのとこに書くしかないかも。*3