Vue dynamically modifies the audio address

Problem: The url address is replaced after clicking, and it is realized, but the player still does not respond.

Solution: The dynamic replacement in vue only replaces the address, and does not tell whether the audio tag should be executed or what to do. It needs to be loaded to let it know that it is calling him, and he needs to operate!

The page design uses element

The effect will pop up when you click to listen to it, and the music will be turned off when you click x.

 

the code

        <transition name="el-zoom-in-bottom">
            <div class="mp3Audio" v-show="mp3Audio">
                <div class="audioClose" @click="closeAudio"><i class="el-icon-close"></i></div>
                <div class="mp3Name">{
   
   {mp3Name}}</div>
                <audio controls="controls" ref="audioRef">
                    <source :src="mp3Url" type="audio/mp3"/>
                    <source :src="mp3Url" type="audio/ogg"/>
                    Your browser does not support this audio format.
                </audio>
            </div>
        </transition>

 

            // 点击试听，绑定地址，dom，自动播放
            handleListen(row) {
                console.log(row);
                this.mp3Name = row.ptitle
                this.mp3Url = row.purl
                this.mp3Audio = true
                const audioRef = this.$refs.audioRef
                audioRef.load()
                audioRef.play()
            },
            // 关闭播放器
            closeAudio() {
                const audioRef = this.$refs.audioRef
                audioRef.pause()
                this.mp3Name = ""
                this.mp3Url = ""
                this.mp3Audio = false
            },