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