# setTimeout(播放音樂)於移動裝置無法正確執行

*2021-09-30*

在製作壽司活動網站時發現，大部分移動瀏覽器不允許網頁自動播放音樂，就算使用者點擊觸發`on("click,()=>{setTimeout(audio.play(),3000)}")`,也會被瀏覽器判定為網頁自動播放。
為了達到音樂延遲播放，因次先將音樂綁定在某個按鈕上，讓使用者點擊時執行播放並立刻暫停，之後再利用 setTimeout 來達成延遲播放音樂的效果。

//原本寫法
$(btn).on("click",()=>{
	let audio = $(audio[src="/url"])
	$(audio).play();
	$(audio).pause();
	setTimeout(()=>{
		$(audio).play();
	},3000)
})

雖然正確執行播放但瀏覽器會丟出錯誤:`DOMException: The play() request was interrupted `

看過文件和網路資料後了解到，由於現在html5，chome、firefox 等瀏覽器執行 audio.play()時會回傳promise，使用上述方式，回傳promise前就執行audio.pause()**(音樂沒有完整load)**，再次執行.play()時會丟出錯誤，所以先接住audio.play()的promise確認audio有正確load後再停止音樂，再次執行時就不會有錯誤訊息

function touchAudio(dataName) {
    let audio = $(`audio[data-name="${dataName}"]`);
    let playPromise = $(audio)[0].play()
    if (playPromise !== undefined) {
        playPromise.then(_ => {
            // Automatic playback started!
            // Show playing UI.
            // We can now safely pause video...
            pauseAudio(dataName)
        })
        .catch(error => {
            // Auto-play was prevented
            // Show paused UI.
        });
    
    }
}

參考文件:https://developers.google.com/web/updates/2017/06/play-request-was-interrupted