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

继上次推送报警消息以后，需要在推送时候，加入警报音效，音效找了好久，各种素材网都是要开会员收费，目前就是需要一段提示音做效果，真正的提示音到时候会提供，这里先想办法白嫖了，点击这里进入音笑网
我选的是QQ经典咳嗽音效，才17kb，改名tip.mp3
这里貌似不能直接粘贴进static文件夹，进入目录粘贴：

大概就是编辑器不能正确打开MP3这个文件，问题不大，

在页面的底部加入代码：

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

一定要注意路径，在本页面相对于static的路径有3级，所以是 . . /. ./. ./

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

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

编译保存，运行：
在弹出提示的时候听到了熟悉的咳嗽声~

VUE+audio实现前端消息提示音效相关推荐

Vue项目中实现消息提示/报警/未读消息（铃铛加小圆点闪烁效果）
在项目开发过程中,可能需要实现以下场景:未读消息提示.报警信息.消息通知等,这些功能往往是在页面的右上角设置一个铃铛,在铃铛或者图标的右上角显示消息数并做呼吸灯效果显示下面分享一下这类效果的实现方法 ...
vue提示音_vue中使用audio标签进行消息提示
本文实现的功能是:有新的消息更新时,页面会播放提示音,提示的声音会播放15秒,然后停止播放,如果在停止播放之前又有新的消息进来,则会重新计时15秒. 首先,添加audio标签,引入资源文件. 在aud ...
vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
vue实现消息提示框
我们常常看到很多vue生态下的ui框架的消息提示框,在页面切换的时候依然停留在页面,我们知道vue这种单页面渐进式框架,所有的操作和元素都是挂载在一个节点上的,当路由变化是整个节点下的dom元素也在重 ...
element-ui前端页面消息提示框
前言:本篇博客主要介绍了前端页面的一些消息提示框,均是element-ui中的组件,查找起来比较方便.详细文档可以查看element-ui官网:Element-ui Message消息提示框用来显示 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
Vue 消息提示通知的几种方式汇总
Vue 消息提示通知组件(Message /Notification)是我们日常开发中经常使用的组件,它可用作与用户交互的反馈提示,信息提交成功.错误.操作警告等场景使用.原生JavaScript 提 ...
vue浏览器消息提示
vue浏览器消息提示 JS部分 //判断浏览器是否支持浏览器消息弹窗 suportNotify() {if (window.Notification) {// 支持console.log(" ...

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

VUE+audio实现前端消息提示音效相关推荐

最新文章

热门文章