曲の変更

プレイヤーの曲を変更するには、player.change()を用います。
HTML側の実装はこれまでと同様で、前曲アイコンと次曲アイコンを併記しています。

<!-- アイコンのリスト -->
<ul class='player-block'>

    <!-- 前曲アイコンとポップアップを格納 -->
    <li class='player-block-btn'>

        <!-- 前曲アイコン -->
        <button class='player-back'> 
            <span class='glyphicon glyphicon-step-backward'></span>
        </button>

        <!-- 前曲アイコンのポップアップテキスト -->
        <span class='player-popup'>前へ</span>
    </li>
    
    <!-- 次曲アイコンとポップアップを格納 -->
    <li class='player-block-btn'>

        <!-- 次曲アイコン -->
        <button class='player-next'> 
            <span class='glyphicon glyphicon-step-forward'></span>
        </button>

        <!-- 次曲アイコンのポップアップテキスト -->
        <span class='player-popup'>次へ</span>
    </li>

    <!-- 他の要素は省略 -->
    ・・・
</ul>

次は、Javascript側のイベント登録です。

//イベント登録
setEvent: function() {

    //プレーヤーの前曲アイコンと次曲アイコンのクリックイベント登録
    $('.player-back')
        .on('click', this.change.bind(this, false, false));
    $('.player-next')
        .on('click', this.change.bind(this, true, false));

    //他の処理は省略
    ・・・
},

bind関数について、第一引数は前述のとおり、関数内のthisを束縛し、第二引数以降には、その関数に渡す引数を指定します。

Player.change()

この関数は、上記のイベント、または前記事のendedイベントから呼び出されます。

/* 曲の変更処理
 *  引数 next 真であれば次曲を、偽であれば前曲を指定
 *  引数 ended イベントのendedからの呼び出しであれば真
 */
change: function(next, ended) {

    //プレーヤーに曲が格納されてなければ処理を中断
    if (!this.track) return;

    //指定する曲のid
    var idNew;

    //次曲指定であれば1を、前曲指定であれば-1を指定
    var num = next ? 1 : -1;

    //指定したidが存在するかどうかを判定
    if (!this.list[this.id + num]) {

        //idが存在せず、かつendedイベントからの処理であればここで中断
        if (ended) return;

        //次曲指定であればリストの先頭を、前曲指定であれえば末端を指定
        idNew = next ? 0 : this.list.length - 1;
    } else {

        //idが存在すればこれを指定
        idNew = this.id + num;
    }

    //idと一致するaudio要素をリストから抽出
    var track = this.list[idNew];

    //曲の再生位置を初期化
    track.currentTime = 0;
    this.track.currentTime = 0;

    //現在の曲が再生中かどうかの判定
    var playing = !this.track.paused;

    //現在の曲が再生中、またはオプションの連続再生が真であるかを判定
    if(playing || this.option.auto) {

        //指定した曲を再生
        this.play(track, idNew);
    } else {

        //現在の曲が再生中であれば停止しアイコンを変更
        if (playing) {
            this.track.pause();
            this.switchIcon();
        }

        //audio要素と曲のidを格納
        this.track = track;
        this.id = idNew;

        //曲の番号とタイトルを表示
        this.getTitle();
    }
},

プレーヤーのリストであるthis.listは、audio要素の配列で、0から始まる添字はaudio要素のidと一致します。指定したidがこのリストの添字として存在しない時、endedイベントから呼び出されたのであれば、現在の曲はリストの末端にあるので、何もせず処理を終了します。clickイベントからであれば、曲の指定がループするように、idを調整します。また、現在の曲が再生中、またはオプションの連続再生が真の場合にだけ、指定した曲を再生します。そうでない場合は、曲の再生は行わず、プレーヤーにこれらの項目を格納し、曲の番号とタイトルをプレーヤーに表示します。

URL： ringil-music.com
ライブラリ： Bootstrap 3・JQuery 1.12.4