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

一、前提:

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

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.mzph.cn/bicheng/59062.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

产品结构设计(六):结构设计全过程

参考引用 产品结构设计实例教程 1. ID 图及 PCB 堆叠分析 1.1 产品说明及相关资料 1、新产品开发指令单 2、ID 图 3、产品功能规格书 1.2 ID 图分析 ID&#xff08;Industrial Design&#xff0c;工业设计&#xff09;是以工业产品为主要对象&#xff0c;综合运用工学、…

文献阅读记录6-Toward computer-made artificial antibiotics

摘要 将合成生物学和计算生物学的概念结合起来&#xff0c;可能会产生比现有药物更不容易产生耐药性的抗生素&#xff0c;而且还能对抗耐药感染。事实上&#xff0c;计算机引导策略与大规模并行高通量实验方法相结合&#xff0c;代表了抗生素发现的新范式。耐多药微生物引起的…

Manus在虚拟现实仿真模拟中的应用案例分享

Manus虚拟现实手套作为一种高精度的人机交互设备&#xff0c;在仿真模拟领域展现出了巨大的应用潜力。通过提供实时、准确的手指动作捕捉数据&#xff0c;Manus手套为多个行业带来了前所未有的仿真体验&#xff0c;推动了技术发展和应用创新。 技术特点 1. 高精度手指跟踪 Ma…

Vim的简单使用

文章目录 Vim的使用日志前言梦的开始从说明书开始Take a bite!Learn to Read!配置文件vimtutor 一些比较实用的操作移动编辑删除、复制、粘贴与组合命令查找替换撤销重做光标跳转补全和命令浅尝一下 保存、丢弃和另存为 关于插件和其他后记关于参考资料 Vim的使用 日志 文章编…

繁星之下--

在一个宁静的小镇上&#xff0c;年轻的画家阿宁用她的画笔捕捉着四季的变换。这个小镇四季分明&#xff0c;春天的嫩芽、夏天的繁花、秋天的金黄和冬天的白雪&#xff0c;仿佛每一个季节都在向她诉说着自己的故事。阿宁常常在思考&#xff0c;如何将这些美丽的瞬间转化为永恒的…

Vue2——单页应用程序路由的使用

一.单页应用程序与多页应用程序之间的比较 二.单页的应用场景 系统类网站 / 内部网站 / 文档类网站 / 移动端网站 三.路由的介绍 1. 什么是路由 路由是一种映射关系 2. Vue中的路由是什么 路径和组件的映射关系 四.VueRouter的使用 5个基础步骤&#xff08;固定&#xff09; …

Windows 下实验视频降噪算法 MeshFlow 详细教程

MeshFlow视频降噪算法 Meshflow 视频降噪算法来自于 2017 年电子科技大学一篇高质量论文。 该论文提出了一个新的运动模型MeshFlow&#xff0c;它是一个空间平滑的稀疏运动场 (spatially smooth sparse motion field)&#xff0c;其运动矢量 (motion vectors) 仅在网格顶点 (m…

大语言模型训练与推理模型构建源码解读(huggingface)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、llama训练模型构建源码解读1、模型构建代码(自己搭建)2、训练模型3、模型调用方法4、训练模型init方法(class LlamaForCausalLM(LlamaPreTrainedModel))5、训练模型forward方法(class Llam…

用Python脚本执行安卓打包任务

这个样例是基于windows系统写的python打包安卓的脚本&#xff1a; 一、配置AndroidStudio下的打包任务 1.在Android项目根目录下的build.gradle文件配置生成Release包的任务&#xff1a; task cleanAll(type: Delete) {delete rootProject.buildDirrootProject.subprojects.e…

专题十七_BFS_BFS解决 FloodFill 算法_BFS 解决最短路问题_多源 BFS_BFS 解决拓扑排序

目录 BFS 一、BFS解决 FloodFill 算法 1. 图像渲染&#xff08;medium&#xff09; 解析&#xff1a; 细节问题&#xff1a; 总结&#xff1a; 2. 岛屿数量&#xff08;medium&#xff09; 解析&#xff1a; DFS&#xff1a; BFS&#xff1a; 总结&#xff1a; 3. …

NVR小程序接入平台/设备EasyNVR多个NVR同时管理视频监控新选择

在数字化转型的浪潮中&#xff0c;视频监控作为安防领域的核心组成部分&#xff0c;正经历着前所未有的技术革新。随着技术的不断进步和应用场景的不断拓展&#xff0c;视频监控系统的兼容性、稳定性以及安全性成为了用户关注的焦点。NVR小程序接入平台/设备EasyNVR&#xff0c…

Vite学习之环境变量

环境变量 Vite 在一个特殊的 import.meta.env 对象上暴露环境变量&#xff0c;这些变量在构建时会被静态地替换掉。这里有一些在所有情况下都可以使用的5个内建变量&#xff1a; import.meta.env.MODE: {string} 应用运行的模式。import.meta.env.BASE_URL: {string} 部署应用…

leetcode71:简化路径

给你一个字符串 path &#xff0c;表示指向某一文件或目录的 Unix 风格 绝对路径 &#xff08;以 / 开头&#xff09;&#xff0c;请你将其转化为 更加简洁的规范路径。 在 Unix 风格的文件系统中规则如下&#xff1a; 一个点 . 表示当前目录本身。此外&#xff0c;两个点 ..…

(自用)机器学习python代码相关笔记

一些自存的机器学习函数和详细方法记录&#xff0c;欢迎指错。 前言&#xff1a;读取数据方法 import pandas as pd import pandas as pddf pd.read_csv(数据集.csv, header0) # header是从哪一行开始读起&#xff0c;一般是0&#xff0c;也可以取infer 一、数据处理&#…

springboot框架使用RabbitMQ举例代码

以前分享过一个理论有兴趣的小伙伴可以看下 https://blog.csdn.net/Drug_/article/details/138164180 不多说 还是直接上代码 第一步&#xff1a;引入依赖 可以不指定版本 <!-- amqp --><dependency><groupId>org.springframework.boot</groupId…

vscode 创建 vue 项目时,配置文件为什么收缩到一起展示了?

一、前言 今天用 vue 官方脚手架创建工程&#xff0c;然后通过 vscode 打开项目发现&#xff0c;配置文件都被收缩在一起了。就像下面这样 这有点反直觉&#xff0c;他们应该是在同一层级下的&#xff0c;怎么会这样&#xff0c;有点好奇&#xff0c;但是打开资源管理查看&…

php开发实战分析(8):优化MySQL分页查询与数量统计,提升数据库性能

在开发过程中&#xff0c;我们遇到了一段用于从数据库中查询部门信息的PHP代码。该代码负责根据不同的条件&#xff08;如部门名称和来源&#xff09;筛选数据&#xff0c;并返回分页结果及总记录数。然而&#xff0c;原始代码存在一些问题&#xff0c;包括重复的查询条件构建逻…

大学适合学C语言还是Python?

在大学学习编程时&#xff0c;选择C语言还是Python&#xff0c;这主要取决于你的学习目标、专业需求以及个人兴趣。以下是对两种语言的详细比较&#xff0c;帮助你做出更明智的选择&#xff1a; C语言 优点&#xff1a; 底层编程&#xff1a;C语言是一种底层编程语言&#x…

数据结构,问题 F: 括弧匹配检验

题目描述 假设表达式中允许包含两种括号&#xff1a;圆括号和方括号&#xff0c;其嵌套的顺序随意&#xff0c;如&#xff08;&#xff3b; &#xff3d;&#xff08;&#xff09;&#xff09;或&#xff3b;&#xff08;&#xff3b; &#xff3d;&#xff3b; &#xff3d;&a…

yolov8涨点系列之优化器替换

文章目录 优化器替换的重要性加速收敛速度提高模型精度增强模型的泛化能力适应不同的数据集和任务特点 优化器替换步骤(1)准备代码&#xff1a;(2)导入优化器(3)替换优化器 本文将以替换Lion为优化器的方式展示如何对Ultrayluic的yolov8进行优化器替换。 优化器替换的重要性 加…