本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。
vue.js添加背景音乐的方法:
1. VUE 中 mp3 播放的loader 配置
webpack.base.conf.js 中
{ test: /\.(mp3)(\?.*)?$/, loader: 'url-loader', options: { name: utils.assetsPath('assets/[name].[hash:7].[ext]') }
vue-loader.conf.js 中
audio: 'src'
2. audio
<div class="swiper-button-next" @click="close">点击按钮关闭/打开音乐</div> <div class="audio"> <!--隐藏audio标签--> <audio autoplay="autoplay" id="music1"> <source src="https://test.app.bhfae.com:8443/files/file/2177691016.mp3"> </audio> </div>
3. 控制音乐播放还是暂停
methods: { close() { var audio = document.getElementById('music1'); if (audio.paused) { audio.play(); // 播放 } else { audio.pause();// 暂停 } }
以上就是vue.js怎么添加背景音乐的详细内容,更多请关注易知道|edz.cc其它相关文章!