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

一、前提:

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

1、页面添加打开告警声音开关按钮

2、首次进入页面时添加交互弹窗提示:是否允许播放音频

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


二、具体代码如下:

dart 复制代码
<template>
	<div>
		<el-button @click="handelPlay" type="primary">开启声音</el-button>
		// 默认声音只播放一次 如需设置循环播放 设置loop
		<audio id="audio" controls="controls" ref="audioRef" :src="音频文件地址" hidden @play="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


四、寄语:

人生岂能都如意,万事只求半称心。

有舍有得有欢喜,且行且远且珍惜。

童年的雨天最是泥泞,却是记忆里最干净的曾经。

相关推荐
264玫瑰资源库20 分钟前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端30 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED36 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常2 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
Quz2 小时前
使用Qt Quick Controls创建自定义日历组件
qt·ui·交互
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法