vue实现点击按钮发出警报声
Vue的音乐文件夹叫做assets,assets文件夹在Vue项目的根目录下。assets文件夹用于存放项目中使用的静态资源文件,包括图片、音乐、视频等。在assets文件夹中,可以创建一个单独的文件夹用于存放音乐文件,命名可根据需要自定义,一般而言命名为music或audio。
音频文件:在这里免费下载 https://sc.chinaz.com/tag_yinxiao/tixing.html
在Vue项目中使用音乐文件时,可以在对应的组件中引入音乐文件。例如,假设在项目的home组件中使用音乐文件,可以在home.vue文件中的script标签中引入音乐文件,代码如下:
<el-button type="primary" size="mini" class="ele-btn-icon" @click="simulateError()" > 模拟错误(播放) </el-button> <el-button type="primary" size="mini" class="ele-btn-icon" @click="pauseAudio()" > 暂停 </el-button> <el-button type="primary" size="mini" class="ele-btn-icon" @click="stopAudio()" > 停止 </el-button>
使用JavaScript的Audio对象:在前端开发中,可以使用JavaScript的Audio对象来播放音频文件。
data() { return { bgMusic: require('@/assets/music/6201.mp3'), audio: '' }; },
要暂停或停止正在播放的音频文件,可以使用pause()方法来暂停音频的播放,使用currentTime属性将当前播放时间设置为0来停止音频的播放。
methods: { simulateError() { this.playErrorSound(); // 模拟错误处理逻辑 console.error('发生错误!'); }, playErrorSound() { // 播放背景音乐代码 this.audio = new Audio(); this.audio.src = this.bgMusic; this.audio.loop = true; this.audio.play(); }, // 暂停 pauseAudio() { this.audio.pause(); }, // 停止 stopAudio() { this.audio.pause(); this.audio.currentTime = 0; } }
参考:
https://worktile.com/kb/ask/787442.html
https://cloud.tencent.com/developer/information/%E5%A6%82%E4%BD%95%E6%9A%82%E5%81%9C%E6%88%96%E5%81%9C%E6%AD%A2%E6%AD%A3%E5%9C%A8%E6%92%AD%E6%94%BE%E7%9A%84%E9%9F%B3%E9%A2%91%E6%96%87%E4%BB%B6-article