Vue dynamically sets the src of audio/video to play disorderly

 <el-dialog :visible.sync="AudioOpen"
               :close-on-click-modal="false"
               :destroy-on-close="true"
               @close="playerAudioVisible=false"
               width="330px"
               class="dialogAV"
    >

      <audio
        v-if="AudioOpen"
        controls
        class="audio"
        ref="dialogAudio"
        preload="meta"
        width="100%">
        <source :src= audioUrl >
        您的浏览器不支持audio标签。
      </audio>
    </el-dialog>

This is because VUE updates the DOM asynchronously. When we change the src attribute data, the src attribute bound to the DOM is not updated immediately, so an error may be reported when operating the DOM

In order to ensure that the operation can be performed after the update is completed, $nextTick can be used
to ensure that the callback method is executed after the update queue is completed.

playAudio(url){
    
    
      this.audioUrl = process.env.VUE_APP_BASE_API +url;
      this.$nextTick(res => {
    
    
        const {
    
     dialogAudio } = this.$refs
        dialogAudio.load()
        dialogAudio.play()
      })
      this.AudioOpen=true
    },

Or put a v-if on the tag to reload the tag

 <audio
        v-if="AudioOpen"
        controls
        class="audio"
        ref="dialogAudio"
        preload="meta"
        width="100%">
        <source :src= audioUrl >
        您的浏览器不支持audio标签。
      </audio>