一、前提:
由于浏览器限制不能自动触发音频文件播放,所以实现此类功能时,需要添加触发事件,举例如下:
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
四、寄语:
人生岂能都如意,万事只求半称心。
有舍有得有欢喜,且行且远且珍惜。
童年的雨天最是泥泞,却是记忆里最干净的曾经。