以下は、曲の再生位置を変更するシークバーのコードです。

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