YouTubeの音楽プレーヤーサイトを作ろう！

音楽

2020.07.26

音楽プレーヤーサイトを作ろう

君のラジオというサイトを知ってるかい？YouTubeの動画をプレイリストで再生できるサイトだったんだけど、いつの間にか閉鎖されていた。仕事場など自分の部屋以外で音楽が聴きたくなったときにたまーに使ってたけど、使えなくなったので自分で作ろうと思う。まぁ探せば似たようなサイトはあるだろうけど。

というわけでYouTubeの動画をプレイリストにして音楽プレーヤーのように再生できるサイトを作ろうと思います。

サイト仕様

まずはどういう機能をもったサイトを作るか考えてみる。今のところ考えている機能はこのくらい。

YouTubeから動画の検索ができる
検索結果（10くらい？）からプレイリストに追加する動画を選択できる
動画を再生できる
動画が終了するとプレイリストの次の動画を再生する
再生、一時停止、頭出し、シャッフル、ループ、1曲ループ、音量調整などのコントロール

後々拡張するとして基本機能はこのくらい。

YouTube動画再生

とりあえずYouTubeの動画を再生させることを試してみよう。動画の埋め込みプレーヤーを作成するにはjavascriptでYouTubeのIFrame Player APIを読み込みます。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

次に、YouTubeの埋め込みプレーヤーを用意します。

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
       'Player', // 埋め込む場所のidタグ
        {
           width: 640, // プレーヤーの幅
          height: 390, // プレーヤーの高さ
            videoId: 'c7ZeI5iwOyA' // YouTubeの動画ID
      }
   );
}

HTMLでPlayerのidを付けた場所にYouTubeの埋め込み動画が表示されます。

このように埋め込み動画が表示されます。