vue下音频的处理，整个网站音量控制

最新推荐文章于 2025-09-22 16:56:14 发布

原创最新推荐文章于 2025-09-22 16:56:14 发布 · 6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中实现背景音乐音量的控制及音量设置的持久化存储。通过使用HTML5的audio标签播放音乐，并利用Vue的状态管理和Cookie进行音量调整后的保存。此外还分享了关于钢琴应用、audio元素初始化、Vue中配置MP3文件的相关资源。

要有个整体的音量控制按钮，如图左上

下面的音量html

<audio id="bgAudio" src="../../../static/music/test.mp3" controls ></audio>

当音量改变的时候

changeVolume(){
    // 存到cookie里面
    this.$store.dispatch("set_Volume",this.volume);

},

SET_VOLUME:(state,volume) =>{

    state.volume = volume／100;
    Cookies.set('volume', volume/100, { expires: 30 })
}

放在getters和cookie中

然后音量变化的时候，用computed和watch来操作

computed: {
    volume () {

        return this.$store.getters.volume;
    }
},
watch: {
    volume: function(cur, old) {
        document.getElementById("bgAudio").volume = cur;

        console.log("修改前为：" + old);
        console.log("修改后为：" + cur);
    }
},