由于项目需要,页面要发出报警音。
刚开始找了一个示例,是在watch里监听值改变,不过我运行了一下没有声音出现,所以还是记录一下成功实现的代码。
首先就是需要一段报警的mp3,对于网上免费的报警音资源,我是在这里下载的
https://hd1080.pro/?s=%E6%8A%A5%E8%AD%A6
然后将该段mp3放入文件夹中,放哪儿都可以,只要引用的时候能找到就行。我是和当前使用的文件放在同一级目录下
然后在html部分引入播放声音的标签
<audio controls="controls" hidden src="./dd.mp3" ref="audio"></audio>
<el-button type="warning" icon="el-icon-edit" @click="startplay">开始播放</el-button>
然后创建函数去监控一下按钮,当点击按钮的时候就会播放报警音
startplay(){
this.$refs.audio.currentTime = 0; //从头开始播放提示音
this.$refs.audio.play(); //播放
}
接着保存运行,点击按钮就可以听到报警音了!