在練習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',// 播放清單的idmaxResults: 50,// 預設為五筆資料,可以設定1~50key: '你的金鑰'}}).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 載入後執行這個 創造一個iframefunction 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()