H5 embedded in the small program,IOS cannot play automatically and music is still playing after the small program goes to the background

Question:

• IOS cannot play automatically because IOS requires interaction before it can play
• After the small program into H5, turn to the background operation, music is still playing

‘visibilitychange events:

The ‘visibilityChange’ event is triggered when the browser TAB page is shown or hidden, so we can listen for this event when the page is initialized and pause the music in the listener callback.

autoplay() {
  let audio = this.$refs.MusicPlay;
  this.$wx.miniprogram. getEnv(res => {// Determine if you are in a small program environmentif (res.miniprogram) {
      audio.play();
      this.musicFlag = true;
      audio.volume = 0.8;
    }
  });
  document.addEventListener("visibilitychange", () => {// Initialize the listening eventif(document.hidden) {// Close music audio-pause (); }else {
      if (this.musicFlag) {
        setTimeout(() => {
          audio.play();
          this.musicFlag = true; // Control music icon change}, 2000); }}}); }Copy the code

Conclusion:

I don’t know if the above one solved both problems, but the second one must have solved, and the IOS one seems to have solved… Awkwardly, that’s it, ha.