H5頁面在浏覽器、微信中自動播放音頻 Audio

最簡單的寫法

<audio id="audio" src="path/to/audio.mp3" autoplay></audio>

但是目前部分浏覽器為了使用者體驗，禁止了audio的autoplay的屬性，包括不限于chrome、safari、微信内置浏覽器。

對于微信浏覽器，可以添加一個document事件WeixinJSBridgeReady來在事件觸發後執行audio.play()。

對于其它浏覽器，可以添加使用者互動事件在事件觸發後執行audio.play()。

var _palyer = document.getElementById('audio);
function initAutoPlay () {
  _player.play();
  document.removeEventListener('touchstart', initAutoPlay, false);
}
function playAudio () {
  _player.play();
}
document.addEventListener('touchstart', initAutoPlay, false); // 解決部分浏覽器禁止自動播放問題
document.addEventListener('WeixinJSBridgeReady', playAudio, false); // 解決微信浏覽器
      

以上為最簡單的實作方式。

如果需要在audio播放或者暫停時做一些操作，例如播放時給一個按鈕或者圖示動畫，暫停時動畫也暫停，可以用audio的事件來實作：

_player.addEventListener('pause',  pauseFun, false);暫停

_player.addEventListener('playing',  pauseFun, false); // 播放中

判斷audio是否在播放中：

if (_player.paused) {

  // 暫停

} else {

  // 播放中

}