vue播放报警音实现过程

由于项目需要，页面要发出报警音。
刚开始找了一个示例，是在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(); //播放}

接着保存运行，点击按钮就可以听到报警音了！

vue播放报警音实现过程相关推荐

一对一直播源码开发，如何改善音视频通话过程中的用户体验？
在一对一直播源码开发中,由于是单个用户对话单个用户,所以对音视频通话质量的要求会比较高,那应该如何在开发时改善音视频通话中的用户体验呢? 一.选择播放模式在一对一直播源码中视频通话过程中出现马赛克或 ...
vue仿抖音视频列表（兼容微信内置X5浏览器）
vue 仿抖音视频列表(兼容微信内置X5浏览器)https://blog.csdn.net/superKM/article/details/87603255制作仿抖音视频列表遇到很多坑,特别是安卓微 ...
html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...
[css] 如何隐藏没有静音、自动播放的音视频？
[css] 如何隐藏没有静音.自动播放的音视频? 浏览器已禁止打开页面时自动播放,可以用iframe先播触发播放权限,然后再播放做一个opacity:0 的假隐藏个人简介我是歌谣,欢迎和大家一起 ...
mysql内存报警_[MySQL生产环境] Innodb存储引擎内存报警问题处理过程_MySQL
bitsCN.com [MySQL生产环境] Innodb存储引擎内存报警问题处理过程 1 不停的收到email报警,内存值超过阀值80%了. 2 top下,mysqld进程确实占据了77.5%,再加 ...
SpriteKit:模拟器中播放效果音有延时的解决办法
以下代码在模拟器(Xcode 8.1 + iPhone7)中运行会在第一次播放效果音时有半秒到1秒(甚至更长!)的延时,随后再播放就没有延时了: let sound = SKAction.playSo ...
怎么样关闭计算机的操作音,电脑报警音怎么关闭
报警声分很多种,每一种声音都昭示着相应的故障,帮助我们分析故障原因,那么电脑报警音怎么关闭呢?学习啦小编分享了关闭电脑报警音的方法,希望对大家有所帮助. 电脑报警音关闭方法一:常见的报警声 1.&qu ...
vue create xxx创建项目过程中报错的解决方法
vue create xxx创建项目过程中报错的解决方法报错图例解决办法报错图例解决办法首先检查电脑里是否安装node.js 检查方法:命令行输入 node -v 还要再输入一个 npm - ...
Vue 播放rtmp直播流
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Vue 播放rtmp直播流前言一.vueVideo.vue封装二.调用方式前言该组件是在vue-video-player基础 ...
FFmpeg/WebRTC/RTMP/RTSP/HLS/播放器-音视频流媒体高级开发【零声学院】
FFmpeg/WebRTC/RTMP/RTSP/HLS/播放器-音视频流媒体高级开发学习音视频流媒体高级开发学习 01音视频基础 [录播]0-音视频开发高级课程简介(22分钟) 免费试学 [录播] ...

vue播放报警音实现过程

vue播放报警音实现过程相关推荐

最新文章

热门文章