曲の再生が始まれば、一定期間毎に再生時間を表示し、スライドバーに現在の再生位置を代入します。
HTML側の実装
<!-- アイコンのリスト -->
<ul class='player-block'>
<!-- 再生時間を格納 -->
<li class='player-block-time'>
<!-- 再生時間 -->
<span class='player-time'>0:00 / 0:00</span>
</li>
<!-- 他の要素は省略 -->
・・・
</ul>
シークバーの要素に関しては、前回の記事で取り扱っています。
Javascript側の実装
//イベント登録
setEvent: function() {
//曲の進行毎に関数を呼び出し
$('audio').on('timeupdate', this.progress.bind(this));
//他の処理は省略
・・・
},
timeupdate
イベントはaudio
要素のcurrentTime
属性の更新毎に発火し、登録された関数を呼び出します。
以下は登録された関数と、それを補助する関数です。
//曲の進行処理
progress: function() {
//プレーヤーに曲が格納されてなければ処理を中断
if (!this.track) return;
//現在の再生位置を取得
var durCur = this.track.currentTime;
//曲の長さを取得
var durTotal = this.track.duration;
//シークバーのつまみの位置をパーセンテージで取得
var width = Math.floor(durCur / durTotal * 100);
//シークバーに値を代入
$('.player-seek-bar').val(width);
//秒を時刻表示に変換
var durCurText = this.getTime(durCur);
var durTotalText = this.getTime(durTotal);
//再生位置と曲の長さを併記
var durText = durCurText + ' / ' + durTotalText;
//再生時間の文字列を要素に代入
$('.player-time').text(durText);
},
/* 時刻表示の変換
* 引数 duration 曲の秒数
*/
getTime: function(duration) {
//分の取得
var durMin = Math.floor(duration / 60);
//分を差し引いた秒の取得
var durSec = Math.floor(duration - durMin * 60);
//秒が10未満であれば先頭に0の文字を付与
if (durSec < 10) durSec = '0' + durSec;
//分秒を時刻表示にし文字列として返却
return durMin + ':' + durSec;
},
Math.floor
は与えられた数値の小数部分を切り捨て、整数にします。val()
は、要素のvalue
属性に引数の値を代入します。同様に、text()
は、引数に与えられた文字列を、要素のテキストに置き換えます。また、Javascriptでは数値と文字列を加算すると、数値が文字列として扱われるので、上記では、getTime()
の変数durSec
の値が一桁であれば、これを利用して二桁表記に変換しています。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4