YouTubeの検索結果からプレイリストを作成する（YouTubeの音楽プレーヤーサイトを作ろう！その６）

YouTubeの検索結果からプレイリストを作成する

今回はYouTube動画を検索し、その結果から任意のプレイリストを作成することを目指します。プレイリストへの追加はHTML上ではtableに追加するようにして、実際に使用する動画IDはjavascriptの配列に格納するようにします。※ソースコードは動けばいい精神で作っているのであまり参考にはならないと思います。

PHP

検索結果のプレイリスト追加はjavascriptで行います。まずは、前回のPHPで返すHTMLコードの動画の説明部分（description）をプレイリストへの追加ボタンに変更します。追加ボタンはこんなかんじ。

$add_btn =  sprintf('<button id="%s" name="%s" onclick="click_add(this.id,this.name);return false">プレイリストに追加</button>',
                $searchResult['id'] ,str_replace ('"' , '&quot;' ,$searchResult["snippet"]["title"])
                );

次にclick_addをjavascriptに実装し、追加ボタンをクリックするとプレイリストに追加されるようにします。

javascript

javascriptでは、まず、プレイリストの配列を用意します。

var playlist_id = new Array();
var playlist_title = new Array();

追加ボタンはこんな感じ。

// プレイリストに曲を追加
function click_add(m_id,m_title) {
    playlist_id.push(m_id);
    playlist_title.push(m_title);
    playlist_table();//プレイリストのtableを作成するfunction
}

プレイリストのtableを作成するfunctionはこんな感じ。

//プレイリストのtableを作成
function playlist_table() {    
    var playlist_html = '<table><tbody>';

    var i = 0;
    var j = 1;
    playlist_id.forEach(function( value ) {
        playlist_html += '<tr><td><button id="' + i + '" onclick="click_del(this.id);return false" >' + 
        '削除' + '</button></td>' +
        '<td><button id="' + i + '" onclick="click_play(this.id);return false" >' + 
        '[' + j + '] . ' + playlist_title[i] + '</button></td></tr>';
        i++;j++;
   });
    playlist_html += '</tbody></table>';
    $('.playlist').html(playlist_html);//<div class="playlist"></div>に表示させる
}

さらにtable上の動画タイトルをクリックすると再生するようにします。こんな感じ。

// プレイリストの曲をクリック
function click_play(m_count) {
    ytPlayer.loadVideoById(playlist_id[m_count]);
    count = m_count;
}

また、table上のプレイリストから動画を削除する処理を入れます。

// プレイリストの曲を削除
function click_del(m_count) {
    if(m_count <= count){
        count = count-1;
    }
    playlist_id.splice( m_count, 1 );
    playlist_title.splice( m_count, 1 );
    playlist_table();
}

大体こんな感じで検索結果をプレイリストに追加することができます。