Chrome66 Auto Play Error: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first

After version 66, users are prohibited from entering the page to automatically trigger audio or video playback

The user must manually click play to play, so there is an error message like this

Two Methods:

  1. Guide the user to click to turn on the sound.
  2. Mute by default after entering the page.

By default, enter the page mute and add muted to the audio

Add a watch

watch: {
    isOpenMusic: {
      handler(val) {
        if (val) {
           this .$refs.audio.muted = "" ;
          console.log( "There is sound" );
        } else {
           this .$refs.audio.muted = "muted" ;
          console.log( "Mute" );
        }
      },
    },
  },

Give a button to switch dynamically

< i class ="iconfont" style ="font-size: 1.2rem; cursor: pointer; color: #ffffff" :class ="[isOpenMusic?'icon-shengyin':'icon- shengyinguanbi ']" @click ="isOpenMusic = !isOpenMusic" >

methods

audioPlay() {
      setTimeout(() => {
         this .$refs.audio.play();
      }, 10 );
},

sockets hook

socket:{
 // listening user list 
    updateUserList(data) {
       this .loginUserList = data;
       if ( this .isOpenMusic) {
         this .audioSrc = require("../assets/上线.wav" );
         this .audioPlay();
      }
    },
}

In this way, the default sound of the user coming in the page is off, and you need to manually click to open the sound to hear the update of the chat room user list

Similar Posts: