小程序内嵌H5,IOS无法自动播放以及小程序转后台后,音乐依旧播放问题

问题:

• IOS无法自动播放,因为IOS的机制,需要有交互之后才可以播放
• 小程序进入H5之后,转后台运行,音乐依旧播放

'visibilitychange'事件:

'visibilitychange'事件在浏览器标签页面被显示或隐藏的时候会触发该事件,所以我们可以在页面初始化的时候就监听这个事件,在监听的回调里面来控制音乐的播放暂停.

autoplay() {
  let audio = this.$refs.MusicPlay;
  this.$wx.miniProgram.getEnv(res => {//判断是否处在小程序环境中
    if (res.miniprogram) {
      audio.play();
      this.musicFlag = true;
      audio.volume = 0.8;
    }
  });
  document.addEventListener("visibilitychange", () => {//初始化监听事件
    if (document.hidden) {    //页面隐藏则关闭音乐
      audio.pause();
    } else {
      if (this.musicFlag) {
        setTimeout(() => {
          audio.play();
          this.musicFlag = true;    //控制音乐图标变化
        }, 2000);
      }
    }
  });
}

总结:

我忘了上面的是不是解决了两个问题,反正第二个问题肯定解决了,IOS的忘了,感觉好像是解决了...尴了个尬,就这样吧,哈.