[菜鳥工程師]youtube data api 載入播放清單並切換歌曲

在練習api的時候，想要用一個音樂播放器，不過spotify api 比較複雜，需要網域申請的樣子，所以就發現了youtube data API，來練習看看，這次練習是想要載入一個播放清單並切換歌曲播放。分為兩大步驟，利用ajax(axios)載入youtube data API 取得特定播放清單的資料，接著利用YouTube IFrame Player API 控制播放。

一、youtube data API取得特定播放清單的資料

首先，使用需要到google developer專區申請金鑰並開通，就像google map使用一樣， https://console.developers.google.com/apis，取得youtube影片的語法可以利用ajax的方法，可以參考api左邊的教學，有Playlist、PlaylistItems…的方式，而我使用PlaylistItems來取得特定播放清單的影片。語法並不困難如下:

axios.get('https://www.googleapis.com/youtube/v3/playlistItems',
{
params: {
part: 'snippet,contentDetails',// 必填，把需要的資訊列出來
playlistId: 'PLeQlgf5H84mfXRDGtaFiGOOef-szLM7Ov',// 播放清單的id
maxResults: 50,// 預設為五筆資料，可以設定1~50
key: '你的金鑰'
}
}).then(res => {
console.log(res.data.items)
}).catch(e => console.log(e))

這邊需要注意的是，一定要給part這個屬性，避免他載入所有的資訊會太大包。snippet包含清單各個影片的詳細資訊，而contentDetails可以取得該video的id。而playlistId 要怎麼取得呢? 在youtube的特定播放清單的網址， 比如說 https://www.youtube.com/watch?v=c91bNchSC5Q&list=PLDSoAwX5rf2kko6lMB6YZv2k-zz3Fo6E2，list接的值就是playlistId。這樣就可以取得播放清單的歌曲資料囉!

利用 https://www.youtube.com/watch?v=videoId，結合iframe就可以在html裡面引入影片囉!

二、YouTube IFrame Player API 控制播放

如果你想要做按鈕來控制播放的話，需要使用到YouTube IFrame Player API(docs)，這個api的引用可以加在html檔案裡面:

<script src=”https://www.youtube.com/player_api"></script>

當檔案讀到這個api的時候，就會執行onYouTubeIframeAPIReady方法，有時候無法確保讀到api就執行，如果讀取失敗的話，寫在執行的js檔案裡面onYouTubeIframeAPIReady方法之前，比較保險。

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

接著在html新增一個等一下要來放iframe的div。

<div id=”player”></div>

onYouTubeIframeAPIReady創造iframe

let player
// api 載入後執行這個 創造一個iframe
function onYouTubeIframeAPIReady() {
// 'player' 是指id=player的東西
player = new YT.Player('player', {
fitToBackground: true,
height: '0',
width: '0',
videoId: videoId,
playerVars: { //自訂參數
'controls': 1, //控制列，0:隱藏，1:顯示(默認)
//'fs': 0, //全屏按鈕，0:隱藏，1:顯示(默認)
//'iv_load_policy': 3, //影片註釋，1:顯示(默認)，3:不顯示
//'rel': 0, //顯示相關視頻，0:不顯示，1:顯示(默認)
//'modestbranding': 0, //YouTube標籤，0:顯示(默認)，1:不顯示
//'playsinline': 1 //在iOS的播放器中全屏播放，0:全屏(默認)，1:內嵌
},
events: {
// 當video player ready的時候載入
// 'onReady': onPlayerReady,
// 當狀態改變的時候載入
// 'onStateChange': onPlayerStateChange
}
})
console.log(player)
}
function onPlayerReady(evt){
evt.target.playVideo()
}
function onStateChange(evt){
if (event.data == YT.PlayerState.PLAYING) {
  player.pauseVideo() // 暫停
  // player.stopVideo()// 從頭開始
}
}

可以利用事件來控制要執行的事情，在載入的時候就播放onPlayerReady，或是狀態發生改變的時候onStateChange就讓他暫停播放。可以利用playVideo()、stopVideo()、pauseVideo()來控制，YT.PlayerState提供了五個狀態讓你做判斷:

YT.PlayerState.UNSTARTED // -1
YT.PlayerState.ENDED // 0
YT.PlayerState.PLAYING // 1
YT.PlayerState.PAUSED  // 2
YT.PlayerState.BUFFERING // 3
YT.PlayerState.CUED // 5

另一個方法是自訂按鈕和監聽器，做自己想要的處理。

document.querySelector('.playBtn')
.addEventListener('click', evt => {player.playVideo()})

最後來到要如何切換歌曲呢? 可以使用iframe player api提供的方法loadVideoById，直接切換成該video。

document.querySelector('.changeBtn')
.addEventListener('click', evt => {
player.loadVideoById(videoId)
})

如果要調整速度的話，可以使用setPlaybackRate(num)或是getPlaybackRate()來調整，來完成簡單的切換歌曲功能。

//  速度值: 0.25、0.5、1、1.5、2
player.setPlaybackRate(musicPlayer.speed)
player.getPlaybackRate()