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);
}
标签: javascript

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论