vue动态修改audio地址

问题:点击后替换url地址,实现了,但是播放器依旧没有反应。

解决:vue中动态替换只是替换了地址,并没有告诉audio标签是否要执行,执行什么操作。要load后才能让它知道,是在喊他,他需求进行操作了!

页面设计用的是element

点击试听的时候弹出效果,点击x的时候,关闭音乐。

vue动态修改audio地址_第1张图片

 vue动态修改audio地址_第2张图片

代码

        
            
{{mp3Name}}

 

            // 点击试听,绑定地址,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
            },

你可能感兴趣的:(vue.js,javascript,ecmascript)