在Vue中使用音频文件

使用场景

• 按钮/点击事件中触发一段音效
• 消息通知
• 数据刷新
• 页面背景音

对于页面背景音 来说比较简单，直接在App.vue中使用audio标签即可

<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<audio src="./../static/music/10683.mp3" autoplay loop></audio>

最重要的是在一个按钮或者事件中触发音效

1. 第一步

• 在App.vue 中添加<audio></audio>标签

<!-- 全局音效 -->
<audio src="" id="eventAudio"></audio>

2. 第二步

• 在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;
})

3. 第三步

使用

方法1：
在所需事件中调用Vue原型上的事件

 <div @click="isPlayAudio"></div>

 isPlayAudio(){
   this.playAudio()
 }

方法2：
在所需元素上添加自定义的属性

 <div clickMusic='true' ></div>

！！注意 ！！

最新的chrome已不允许event.play()，所以在chrome下，方法1可能无效，但是方法2是可以的