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 {
  // 播放中
}