サイトから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