audio
要素を取得しプレーヤーのリストに追加します。以下は、自身のサイトの構成に依存しています。
HTML側の実装
下記の音質の選択により、サイトの曲目を変更すると共にプレーヤーのリストも更新します。
<!-- リストの種類を選択 -->
<select id="select" class="form-control">
<option value="all">すべて</option>
<option value="good">良音質</option>
<option value="midi">Midi</option>
</select>
form-control
はBootstrapの関数で選択フォームの見栄えを整えます。
サイトでは曲をtable
要素でリスト化しているのですが、Javascriptの処理に関連する要素の一例を抜き出すと下記のようになります。
<!-- 曲のリスト -->
<tbody class='player-audio-list'>
<!-- 曲の情報を格納 -->
<tr id='town' data-quality='midi'>
<td>
<!-- 音声ファイルを格納 -->
<div class='btn player-audio-btn' data-id='0'>
<!-- 音声ファイルのソース -->
<audio preload='auto'>
<source src='music/town.mp3' type='audio/mp3'>
</audio>
<!-- 再生アイコン -->
<span class='glyphicon glyphicon-play'></span>
<!-- 曲のタイトル -->
<span class='player-audio-title'>街</span>
</div>
</td>
<!--他の<td>要素は省略-->
</tr>
<!--他の<tr>要素は省略-->
</tbody>
Javascript側の実装
//リスト更新のイベント登録
$('#select').on('change', function() {
player.changeList($(this).val());
});
/* サイトとプレーヤーのリストを更新
* 引数 val 取得するリストの種類
*/
changeList: function(val) {
//曲が再生中であれば停止しアイコンを変更
if (this.track && !this.track.paused){
this.track.pause();
this.switchIcon();
}
//更新するリストの取得
var $list;
if (val === 'all') {
//すべてのリストを取得しサイトにも表示
$list = $('.player-audio-list').children().show('slow');
} else {
//非表示にするリストの種類
var valOth;
if (val === 'good') {
valOth = 'midi';
} else if (val === 'midi') {
valOth = 'good';
}
//目的のリストを取得しサイトに表示
$list = $('[data-quality="' + val + '"]').show('slow');
//それ以外のリストは非表示にしidに未使用を示す値を付与
$('[data-quality="' + valOth + '"]')
.hide('slow')
.find('.player-audio-btn')
.attr('data-id', -1);
}
//音声ファイルを格納した要素に固有のidをそれぞれ付与
var id = 0;
$list.find('.player-audio-btn').each(function() {
$(this).attr('data-id', id++);
});
//リストのaudio要素をプレーヤーのリストに追加
this.getList($list.find('audio'))
//リストの最初の要素を取り出しプレーヤーに情報を追加
var $audioBtn = $list.find('.player-audio-btn').first();
this.id = Number($audioBtn.attr('data-id'));
this.track = $audioBtn.children('audio')[0];
this.getTitle();
},
/* プレーヤーのリストを作成
* 引数 $list audio要素のリスト
*/
getList: function($list) {
var list = [];
//配列にリストのaudio要素をそれぞれ追加
$list.each(function() {
list.push(this);
});
//プレーヤーのリストとして保持
this.list = list;
},
find()
はセレクタで指定した要素の子要素を引数により取得します。data-id
についてですが、リスト外の曲のid
には-1
を指定し、リストに登録する曲のid
には0
から順に値を振り分けています。リストされている最初の要素を取得するにはfirst()
を用います。リストの要素それぞれに処理を適用するにはeach()
によりコールバック関数を指定します。配列のメソッドであるpush()
により、添字の0
から順にaudio
要素を追加します。
追記 9/01
サイトの改装により上記の機能は現在使用していません。ジャンルの選択後にページ遷移させてから曲情報を取得しています。
URL: ringil-music.com
ライブラリ: Bootstrap 3・JQuery 1.12.4