【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…

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

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

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

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

用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…

leetcode71:简化路径

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

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

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

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

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

yolov8涨点系列之优化器替换

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

Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果 一、表头合并 参考&#xff1a; https://www.jianshu.com/p/2befeb356a31 二、单元格合并 1、示例代码 <template><div><el-…

C++ -- 模板进阶

非模板类型参数 模板参数分为类型形参与非类型形参。类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class 或 typename之类的参数类型名称。非类型形参&#xff1a;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中将该参数当成常量来使用。…

今日 AI 简报|零样本视频生成、移动端轻量语言模型、自动驾驶多模态模型等前沿 AI 技术集中亮相

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

如何监控员工上网行为?实现精准监控员工上网行为的5个妙招分享!(企业:稳了!)

如何监控员工上网行为&#xff1f; 员工上班时的"摸鱼"行为员工上网行为&#xff08;做与工作无关的活动&#xff0c;如浏览社交媒体、游戏、网购等&#xff09;&#xff0c;不仅影响工作效率&#xff0c;还可能破坏团队氛围&#xff0c;阻碍企业发展。 那么&#…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。 关键词 Canvas 组件复杂路径绘制渐变填充一、Canvas 的复杂路径绘制 Canvas 提供了…

Java 用户随机选择导入ZIP文件,解压内部word模板并入库,Windows/可视化Linux系统某麒麟国防系统...均可适配

1.效果 压缩包内部文件 2.依赖 <!--支持Zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>总之是要File类变MultipartFile类型的 好像是…