移動端背景音樂播放問題

• 由于移動端的特殊性，不能像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);