以下は、曲の再生位置を変更するシークバーのコードです。
HTML側の実装
<!-- アイコンのリスト -->
<ul class='player-block'>
<!-- シークバーを格納 -->
<li class='player-block-seek'>
<!-- シークバー -->
<input class='player-seek-bar' type='range' value='0' min='0' max='100' step='1'>
</li>
<!-- 他の要素は省略 -->
・・・
</ul>
type='range'
属性に関しては前記事のとおりです。このスライドバーがとる値はパーセンテージとして使用します。
Javascript側の実装
//イベント登録
setEvent: function() {
//IEであればchange、そうでなければinputイベントを使用
var event = this.ie ? 'change' : 'input';
//シークバーのイベント登録
$('.player-seek-bar').on(event, function() {
player.seek(this);
});
//他の処理は省略
・・・
},
type="range"
属性のイベントに関してですが、IEではinput
イベントが動作しないので、代わりにchange
イベントを適用してます。IEの判別については、前回の記事で触れています。
/* 曲のシーク
* 引数 element シークバーのinput要素
*/
seek: function(element) {
//プレーヤーに格納されたaudio要素
var track = this.track;
//曲が格納されてない、または曲の長さがセットされていなければ処理を中断
if (!track || isNaN(track.duration)) return;
//曲の長さから割合をとり再生する位置を指定
track.currentTime = element.valueAsNumber / 100 * track.duration;
//曲が停止していれば再生しアイコンを変更
if (track.paused) {
track.play();
this.switchIcon();
}
},
audio
要素のメタデータが読み込まれていない場合は、duration
属性にNaN
の値が入っているので、それをisNaN()
を使って真偽を判定します。再生位置の割り出しに関して、type="range"
属性の値を数値として取り出すために、valueAsNumber
属性を用います。上記の例だと、0
から100
までの数値が得られるので、それを100
で割り、曲の長さに掛けることで、再生位置を割り出しています。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4