HTML側の実装
例として、musicというフォルダのtown.mp3というファイルを再生する場合、
<div class='btn player-audio-btn' data-id='0'>
<!--音声ファイルのソース-->
<audio preload='auto'>
<source src='music/town.mp3' type='audio/mp3'>
</audio>
<!--再生アイコン-->
<span class='glyphicon glyphicon-play'></span>
<!--曲のタイトル-->
<span class='player-audio-title'>街</span>
</div>
<div>
要素のクラスbtn
は、bootstrapのクラスで、それをplayer-audio-btn
というクラスで自サイト用にCSSを調整しています。その中に音声のソースと、再生アイコン、タイトルを格納しています。audio
要素のpreload
属性をauto
にすることで、<source>
要素のパスで指定されている音声ファイルを、事前に読み込むようにします。Glyphicon(ここでは再生アイコン)を使う場合は、<span>
要素のクラスに使用したいアイコンのクラスを指定します。タイトルについて、後に取得するために、<span>
で囲い、クラス指定をしています。
Data属性
複数の曲を管理するために、要素に対して文字列を埋め込む役割である、data
属性を用いています。data-*
の*
に任意の文字列を指定して、値をセットします。上記の場合、data-id
とし、0から順番に数値を割り振っています。この値を取り出すには、JQueryではdata()
とattr()
の関数がありますが、前者は、値をJQuery側でキャッシュするということなので(参考)、サイトでは曲目の変更時に、値を適宜変更できるよう、後者の関数を用いています。上記の例であれば、次のようにして値を取り出します。
//data-idの値である'0'が得られる
var id = $('.player-audio-btn').attr('data-id');
JQueryでは、$()
内に、CSSセレクタと同様の指定をすることで、目的の要素を取得します。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4