VUE+audio实现前端消息提示音效

继上次推送报警消息以后,需要在推送时候,加入警报音效,音效找了好久,各种素材网都是要开会员收费,目前就是需要一段提示音做效果,真正的提示音到时候会提供,这里先想办法白嫖了,点击这里进入音笑网
我选的是QQ经典咳嗽音效,才17kb,改名tip.mp3
这里貌似不能直接粘贴进static文件夹,进入目录粘贴:
VUE+audio实现前端消息提示音效_第1张图片
VUE+audio实现前端消息提示音效_第2张图片
大概就是编辑器不能正确打开MP3这个文件,问题不大,

在页面的底部加入代码:

 <audio controls="controls" hidden src="../../../static/tip.mp3" ref="audio"></audio>

一定要注意路径,在本页面相对于static的路径有3级,所以是 . . /. ./. ./
VUE+audio实现前端消息提示音效_第3张图片

在需要播放的地方加入代码:

     this.$refs.audio.currentTime = 0; //从头开始播放提示音
        this.$refs.audio.play(); //播放

VUE+audio实现前端消息提示音效_第4张图片
编译保存,运行:
在弹出提示的时候听到了熟悉的咳嗽声~
VUE+audio实现前端消息提示音效_第5张图片

你可能感兴趣的:(work)