解决iOS微信上audio不能播放问题

/ 1评 / 1

最近在做
vue-music这个项目时,发现在部分浏览器点击播放时发生错误,具体错误为:
Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture
大概的意思就是play()方法只能人为地触发,一开始以为是播放前发送请求的原因,后来发现直接使用audio然后播放还是不行,后来在网上查了一下,发现原来是ios和部分安卓浏览器由于安全机制问题。不允许audio和video自动播放,后来也在stackoverflow上看到了相似的问题,解决思路是:先在audio播放0秒的无声音的音频。根据这个答案就有了以下解决的办法:
先把audio的src写死成0秒的无声音音频,然后通过用户点击页面播放,这样就达到了人为触发audio的效果,进而实现后面的音频播放。

    const audio = this.$refs.audio;
    audio.play().catch(() => {
      this.playError = true;
      let event = ["click", "WeixinJSBridgeReady"];// "touchstart"
      let pageClick = e => {
        if (this.playError) {
          this.playError = false;
          audio.load();
          audio.play().catch(e => {
            this.playError = true;
          });
          event.forEach((item, index) => {
            document.removeEventListener(item, pageClick);
          });
        }
      };
      event.forEach((item, index) => {
        document.addEventListener(item, pageClick);
      });
  })

One response to “解决iOS微信上audio不能播放问题”

  1. cavin says:

    最后少了一对})

Leave a Reply

Your email address will not be published. Required fields are marked *