天天看點

移動端背景音樂播放問題

移動端背景音樂播放問題

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

繼續閱讀