曲の変更
プレイヤーの曲を変更するには、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