vue+audio 有新消息时加提示音

最新推荐文章于 2024-07-17 15:34:34 发布
最新推荐文章于 2024-07-17 15:34:34 发布
阅读量8.9k 收藏 9
点赞数 4
分类专栏： 前端 Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/animatecat/article/details/97646746
版权 
 <audio controls="controls" hidden src="./static/tip.mp3" ref="audio"></audio>

有新消息时，用以下代码即可播放指定的提示音。

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

 

吃鱼吐泡泡
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
前端消息提醒声音
qq_38822390的博客
05-15 3113
原型图： 项目需求：服务器接受到报警后将消息推送到前台，（通过前端实时消息提示的效果-websocket长轮询），前台接受到消息后需要发出警报提示音，提醒用户。 原理：很简单，使用html5里面的标签即可实现，在铃声的官网上选择一段报警的音频，放在代码里面即可。 代码片段： <%@ page language="java" contentType="text/html; charset=U...
vue3 + vite自定义封装vue+audio ，并发布到npm
l976689的博客
03-29 1708
vue3编写的自定义audio小工具，发布npm使用全过程讲解和遇到的坑
叮咚 新订单 提示音 + 4种音频格式
08-29
叮咚 新订单 自己做的一个！保证下了不后悔的 音频内容：叮咚【音效】 您有新的订单 请及时处理 并带有背景音乐^_^
vue使用audio 音频实现播放与关闭（可用于收到消息给提示音效）
最新发布
高宇辰
07-17 1038
这次项目中因为对接了即时通讯 IM，有个需求就是收到消息需要有个提示音效，所以这里就想到了用HTML5 提供的Audio 标签，用起来也是很方便，首先让产品给你个提示音效，然后你放在项目中，使用Audio 标签，然后引入这段提示音效即可，后续的操作也是我下面的代码，直接复制即可。// 如果你也想在收到消息的时候播放提示音效，在收到消息回调的方法里面执行这个方法（playNotionAudio）即可。// pause()方法只是暂停，这里还需要重新load，然后需要再次play，音乐就可重头播放。
php播放一个提示音,ajax实现web页面的消息实时提醒时播放提示音
weixin_31096417的博客
03-20 673
在应用系统的开发过程中，经常要使用到新消息的提醒功能，比如说后台有一个告警消息，web页面就会实时的收到这个告警的消息，且发出提示音。这其实就是涉及到两个方面的知识，一个是http实时消息的推送，在这儿我就不做升入的探讨，我的下一篇文章将进行升入的探讨，这儿我就主要就主要探讨的是实时播放提示音，这儿我用到的是HTML5中的 标签的属性属性值描述autoplayautoplay如果出现该属性，则音频...
VUE+audio实现前端消息提示音效
weixin_42260782的博客
05-18 5798
继上次推送报警消息以后，需要在推送时候，加入警报音效，音效找了好久，各种素材网都是要开会员收费，目前就是需要一段提示音做效果，真正的提示音到时候会提供，这里先想办法白嫖了，点击这里进入音笑网 我选的是QQ经典咳嗽音效，才17kb，改名tip.mp3 这里貌似不能直接粘贴进static文件夹，进入目录粘贴： 大概就是编辑器不能正确打开MP3这个文件，问题不大， 在页面的底部加入代码： <audio controls="controls" hidden src="../../../static/ti
vue项目中插入提示音
xappleob的博客
09-10 5749
this.$nextTick(()=&gt; { if ( “条件” ) { document.getElementById(‘music’).play(); } })
使用WebSocket实现网页声音提醒
...
08-08 2906
1、SpringBoot整合WebSocket <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency&...
vue.js element message提示 es6模板字符串 提示语点击事件
小妹的博客
10-29 2452
let info = this.isAsync == true ? '正在导入，请到上传下载--结果页面查看导入结果' : '上传成功' let message = this.$message({ dangerouslyUseHTMLString: true, message: `<span>${info}</span>` ...
webSocket前后端使用和页面提示音
习惯沉淀_
05-28 1086
webSocket客户端使用原生的HTML5 首先js判断该浏览器是否支持webSocket var webSocket = null; if('webSocket' in window ){ webSocket = new WebSocket("ws://192.168.1.1/webSocket"); }else{ alert("该浏览器不支持webSocket")...
vue提示音_vue中使用audio标签进行消息提示
weixin_34493827的博客
12-23 2897
本文实现的功能是：有新的消息更新时，页面会播放提示音，提示的声音会播放15秒，然后停止播放，如果在停止播放之前又有新的消息进来，则会重新计时15秒。首先，添加audio标签，引入资源文件。在audio标签中存在如下属性：autoplay：是否音频在就绪后马上播放。controls：是否向用户显示控件，比如播放按钮。loop：是否音频结束时重新开始播放。preload：是否音频在页面加载时进行加载，...
WebSocket消息实时提醒
09-19
仅供参考，项目并不完整！
JS实时弹出新消息提示框并有提示音响起的实现代码
10-22
本文介绍的内容涉及到在网页中实现新消息提示框的弹出和提示音响起的功能。实现这一功能主要依靠JavaScript（JS）和AJAX技术，以及音频播放和动态显示新消息提示框的方法。 知识点一：AJAX技术 AJAX（Asynchronous ...
vue3+node.js实现移动端音乐播放器
07-03
Vue3带来了许多新特性，如Composition API，它使得组件逻辑更加模块化，提升了代码复用性；Suspense组件允许延迟渲染，优化用户体验；以及Teleport功能，可以将组件渲染到DOM树的其他位置。 【压缩包子文件的文件...
vue通过点击事件读取音频文件的方法
08-27
提示声音: 请选择"> v-for="item in options" :key="item.valueOpt" :label="item.label" :value="item.valueOpt"> 试听 ``` 在上面的 HTML 结构中，我们使用了 `el-select` 组件来选择音频文件的...
vue中播放消息提示音
qq_45803593的博客
07-07 5494
在许多场景下，我们需要在有新的消息接受时需要进行提示声音的播放，下面我们就具体讲解在 vue 中如何进行新消息提醒声音的播放
Vue语音播报，不用安装任何包和插件，直接调用。
程序研博客
11-30 3527
Vue语音提示功能可以通过使用浏览器提供的Web Speech API来实现。这个API允许你的应用程序通过浏览器朗读文本，不用安装任何包和插件，直接调用。
使用js给网页添加提示音或播放音效
Xiaomu_app的博客
04-30 1500
有些时候需要给用户一个提示音,用来做站内信提醒,或者交互提醒之类的功能.这时就可以使用js向页面插入音效播放...
vue中播放消息提示报警音
willsoooo的博客
07-18 2948
有时候我们在项目中需要自动报警提示音或者语音提示音，在新版本的浏览器中，edge浏览器和谷歌浏览器需要在设置中打开相关声音权限edge浏览器 设置-搜索所有权限-找到自动播放- 控制是否自动播放网站上的音频及视频 打开允许谷歌浏览器 设置-隐私和安全-网站设置-声音 允许},或者我们在vue的data中创建一个Audio对象然后在方法中使用},
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值