VUE+audio 自定义简单的音乐播放器

最新推荐文章于 2025-03-08 04:26:23 发布

黑哥编程

最新推荐文章于 2025-03-08 04:26:23 发布

阅读量681

点赞数 1

本文链接：https://blog.youkuaiyun.com/m0_53108882/article/details/117700534

版权

本文介绍如何利用H5的audio标签和Vue，通过监听ended、play、pause及load事件，自定义实现一个简单的音乐播放器，无需显示默认的controls。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5的audio标签在不设置controls这个属性的情况下，那么他会默认的隐藏本身的空间。但是方法还能用。
本文主要用的API的方法和事件：
1： ended 当视频/音频播放完时触发（事件）
2：play 播放（方法）
3：pause 暂停（方法）
4：load 重新加载（方法）

JS：

            /**
             * 播放音频
             */
            playAudio() {
   
                this.audioPlayShow = false
                let audio = this.audio = document.getElementById('audio')
                /**
                 * this.$refs.line.offsetWidth 是容器的宽度
                 * audio.duration 是音乐的播放时间长度
                 */
                let step = this.toFixed(this.$refs