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

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

下面的音量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);     } },

参考学习了一些：

钢琴

https://www.jianshu.com/p/5fd498387108

audio的初始化

https://www.cnblogs.com/tie123abc/p/6117563.html

vue中配置mp3

https://blog.csdn.net/woyidingshijingcheng/article/details/75311699

web-audio

http://newhtml.net/web-audio-api%E7%AE%80%E6%98%93%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/

webpack下音乐不能正常播放的方法

https://blog.csdn.net/woyidingshijingcheng/article/details/75311699

转载请标明出处:vue下音频的处理，整个网站音量控制

文章来源: vue下音频的处理，整个网站音量控制