移動端背景音樂播放問題

移動端背景音樂播放問題

• 由於移動端的特殊性，不能像pc那樣自動播放背景音樂，只有用戶操作了纔可以播放

<audio src="song.ogg" controls="controls" autoplay="autoplay">
Your browser does not support the audio tag.
</audio>

因此在移動端上面代碼無效，可以給整個頁面body或者一個按鈕添加事件來觸發音樂的播放

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
});

• 觸發事件後音樂延遲播放，一般就是觸發事件，設置定時器去做，但是在UC中不能實現

document.body.addEventListener('touchstart', function() {
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        clearTimeout(temporary);
    }, 2000);
});

在微信等中上面代碼沒有問題，但是在UC中就敢不播放，如果你去掉定時器，在UC中是可以的。這樣問題就應該出現在定時器上面。經過一番捯飭，發現如果先播放，再經過定時器控制是可以播放的，於是有了下面

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
	document.querySelector('audio').pause();
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        clearTimeout(temporary);
    }, 2000);
});

現在問題解決了，但是又會出來另一個問題，瀏覽器報錯

The play() request was interrupted by a call to pause()

大體意思是，play()之後不能太快執行pause()，於是有了下面

document.body.addEventListener('touchstart', function() {
	document.querySelector('audio').play();
    document.querySelector('audio').volume = 0;
    const temer = setTimeout(() =>{
        document.querySelector('audio').pause();
        clearTimeout(temer);
    }, 500);
	const temporary = setTimeout(() =>{
        document.querySelector('audio').play();
        document.querySelector('audio').volume = 1;
        clearTimeout(temporary);
    }, 2000);
});

• 音樂循環播放問題

<audio src="song.ogg" controls="controls" autoplay="autoplay" loop="loop">
Your browser does not support the audio tag.
</audio>

一般都會知道是加loop屬性，但是有時候在UC中，它只會播放一次，有的音頻卻又可以循環播放。真的讓人鬱悶，冥思苦想找不到原因。經過一番折騰發現，一段音樂在經過截取壓縮處理之後就不能循環播放了，沒加工前卻可以，那麼問題應該是出在音頻資源上。忠告，處理音樂最好使用專業軟件，或者找專業人處理，自己處理的很有可能給自己挖坑！

• 後續

  • 事件touchstart有時候並不會生效，可以改成touchend，但是單獨用這其中一個不能做到兼容全部，最好使用click事件，這個可以完美兼容。

  • 微信中自動播放

    document.addEventListener('WeixinJSBridgeReady', () => {
      document.querySelector('audio').play();
    }, false);