曲の再生が始まれば、一定期間毎に再生時間を表示し、スライドバーに現在の再生位置を代入します。

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