使用场景
- 按钮/点击事件中触发一段音效
- 消息通知
- 数据刷新
- 页面背景音
对于页面背景音 来说比较简单，直接在App.vue中使用audio标签即可
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<audio src="./../static/music/10683.mp3" autoplay loop></audio>
最重要的是在一个按钮或者事件中触发音效
- 第一步
- 在
App.vue中添加<audio></audio>标签
<!-- 全局音效 -->
<audio src="" id="eventAudio"></audio>
- 第二步
- 在
main.js中编写事件
// 引入音频文件
import audio from './../static/music/10683.mp3'
// 方法1：注册播放音频事件到Vue实例上
Vue.prototype.playAudio = () => {
let buttonAudio = document.getElementById('eventAudio');
buttonAudio.setAttribute('src',audio)
buttonAudio.play()
}
// 方法2：添加自定义属性
document.body.addEventListener('click',function( e ){
let event = e || window.event;
let target = event.target || event.srcElement;
let clickMusic = target.getAttribute('clickMusic')
if(clickMusic==='true') Vue.prototype.playAudio()
else return false;
})
- 第三步
使用
方法1：
在所需事件中调用Vue原型上的事件
<div @click="isPlayAudio"></div>
isPlayAudio(){
this.playAudio()
}
方法2：
在所需元素上添加自定义的属性
<div clickMusic='true' ></div>
！！注意 ！！
最新的chrome已不允许event.play()，所以在chrome下，方法1可能无效，但是方法2是可以的
