【vue项目中添加告警音频提示音】

ops/2024/11/1 20:39:37/

一、前提:

由于浏览器限制不能自动触发音频文件播放,所以实现此类功能时,需要添加触发事件,举例如下:

1、页面添加打开告警声音开关按钮
2、首次进入页面时添加交互弹窗提示:是否允许播放音频

以上两种方法原理都是一样的,即添加交互事件,触发音频播放功能


二、具体代码如下:

<template><div><el-button ="handelPlay" type="primary">开启声音</el-button>// 默认声音只播放一次 如需设置循环播放 设置loop<audio id="audio" controls="controls" ref="audioRef" :src="音频文件地址" hidden ="onPlay">Your browser does not support the audio element.</audio></div>
</template>
<script>
export default {data() {return {enableAlarm:false}},methods: {getData(){// 处理告警数据的逻辑if(this.enableAlarm&&有告警数据了){this.$refs.audio.volume = 1; //  告警声音打开}},// 播放组件handlePlay() {this.enableAlarm = !this.enableAlarm;if (this.enableAlarm) {this.play();		 sessionStorage.setItem('enableAlarm',this.enableAlarm)this.$refs.audio.volume = 0; // 打开播放事件静音},onPlay(val) {console.log('开始播放声音');console.log(val);},//播放play() {this.$refs.audio.play();},//音频暂停stop() {this.$refs.audio.pause();this.$refs.audio.currentTime = 0;}}
}</script>

三、参考文章链接:

参考1:
https://blog.csdn.net/Jiaberrr/article/details/142303431

参考2:
https://www.cnblogs.com/Ao-min/p/18428423


四、寄语:

人生岂能都如意,万事只求半称心。
有舍有得有欢喜,且行且远且珍惜。

童年的雨天最是泥泞,却是记忆里最干净的曾经。
在这里插入图片描述


http://www.ppmy.cn/ops/130232.html

相关文章

江协科技STM32学习- P29 实验- 串口收发HEX数据包/文本数据包

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

【hector mapping参数设置】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 hector mapping部分参数介绍调整hector_mapping中的参数ros常见问题总结 hector mapping部分参数介绍 在wiki.ros.org/hector_mapping界面找到3.1.4 Parameters章节…

3D Gaussian Splatting代码详解(一):模型训练、数据加载

1 模型训练 这段代码实现了一个 3D 高斯模型的训练循环&#xff0c;旨在通过逐步优化模型参数&#xff0c;使其能够精确地渲染特定场景。以下是代码的详细解析&#xff1a; def training(dataset, opt, pipe, testing_iterations, saving_iterations, checkpoint_iterations,…

算法刷题-小猫爬山

本题来源165. 小猫爬山 - AcWing题库 翰翰和达达饲养了 NN 只小猫&#xff0c;这天&#xff0c;小猫们要去爬山。 经历了千辛万苦&#xff0c;小猫们终于爬上了山顶&#xff0c;但是疲倦的它们再也不想徒步走下山了&#xff08;呜咕>_<&#xff09;。 翰翰和达达只好花…

记录|SQL中日期查询出现的问题

目录 前言一、BETWEEN AND问题二、时间带有时分秒更新时间 前言 参考文章&#xff1a; 一、BETWEEN AND问题 假设这是我的表中信息&#xff1a; 我想查询2024-10-16到2024-10-17的数据&#xff0c;理论上用Between and就行&#xff0c;如下所示&#xff1a; SELECT create_t…

scRank从untreated数据推断药物有反应细胞类型

由于细胞簇之间存在异质性&#xff0c;细胞对药物的反应也各不相同。因此&#xff0c;识别对药物有反应的细胞簇对于探索药物作用至关重要&#xff0c;但这仍然是一个巨大的挑战。在这里&#xff0c;作者使用 scRank 解决了这个问题&#xff0c;它采用靶标扰动基因调控网络&…

大数据之VIP(Virtual IP,虚拟IP)负载均衡

VIP&#xff08;Virtual IP&#xff0c;虚拟IP&#xff09;负载均衡是一种在计算机网络中常用的技术&#xff0c;用于将网络请求流量均匀地分散到多个服务器上&#xff0c;以提高系统的可扩展性、可靠性和性能。以下是对VIP负载均衡的详细解释&#xff1a; 一、VIP负载均衡的基…

ctfshow web系列

声明: 本文章只适用于网络安全交流与学习,请读者遵循网络安全法,若读者从事一些与网络安全不相关的事情&#xff0c;结果均与本人无关&#xff01;&#xff01;&#xff01; 是ctfshow的web题:https://www.ctf.show/ web3: 开局提示使用php include get url include()函数是…