vue动态修改audio地址

最新推荐文章于 2024-04-01 17:04:26 发布

WiTung

最新推荐文章于 2024-04-01 17:04:26 发布

阅读量1.1k

点赞数 1

分类专栏：前端 audio

本文链接：https://blog.csdn.net/qq_34797972/article/details/115304547

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

audio

1 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中遇到点击MP3文件无法试听的问题，问题在于仅更新URL并未通知audio标签执行播放操作。解决方法是通过调用audio标签的load()方法来刷新资源，并随后播放。示例代码展示了使用Element UI的过渡效果，以及播放和关闭音乐的功能实现。

摘要由CSDN通过智能技术生成

需求：点击MP3文件，实现试听效果

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

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

页面设计用的是element

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

        <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
            },