ios无法自动播放问题

audio自动播放

audio标签提供了 autoplay 属性，可以直接设置该属性就可以在网页打开时候自动播放

<audio id="audio" src="http://www.ytmp3.cn/down/53678.mp3" autoplay></audio>

ios自动播放解决

autoplay 属性在ios上是无效的，ios不允许程序来执行自动播放，需要用户跟界面有交互来触发才能播放（尽量在产品设计上需要有用户交互的时候才播放音频，比如弹窗确认）由于项目需求是开启自动播放后，用户到达景区自动触发，所以在ios上可以通过用户在开启自动播放按钮的时候，触发一次播放音频后马上暂停，后续就可以通过程序来控制音频播放，类似下面的操作

if (utils.os.isIOS) {
  function autoPlayHelper() {
    audio.play();
    audio.pause();
    window.removeEventListener('touchstart', autoPlayHelper);
  }
  window.addEventListener('touchstart', autoPlayHelper);
}

发现控制台报错了，虽然不会影响后续的代码执行，但是还是要解决的

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

从上面的代码可以看出，play() 被 pause() 给中断了，就是在play的时候立刻调用 pause() 后就会触发上述的错误，通过研究发现 play()方法返回的是一个Promise，我们可以在 then() 方法后面再执行 pause() 就不会报上述错误了。

if (utils.os.isIOS) {
  function autoPlayHelper() {
    audio.play().then(ret => {
      audio.pause();
    }).catch(err => {
      audio.pause();
    })
    window.removeEventListener('touchstart', autoPlayHelper);
  }
  window.addEventListener('touchstart', autoPlayHelper);
}