在Vue中使用音频文件

2023-08-19 10:52| 来源: 网络整理| 查看: 265

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

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

最重要的是在一个按钮或者事件中触发音效第一步在App.vue 中添加标签第二步在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原型上的事件

isPlayAudio(){ this.playAudio() }

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

！！注意！！

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

【本文地址】

在Vue中使用音频文件

在Vue中使用音频文件

今日新闻

推荐新闻