wordpress 站点迁移,个人博客网页,推荐5家,新手做网站推荐一、前提#xff1a;
由于浏览器限制不能自动触发音频文件播放#xff0c;所以实现此类功能时#xff0c;需要添加触发事件#xff0c;举例如下#xff1a;
1、页面添加打开告警声音开关按钮 2、首次进入页面时添加交互弹窗提示#xff1a;是否允许播放音频
以上两种方…一、前提
由于浏览器限制不能自动触发音频文件播放所以实现此类功能时需要添加触发事件举例如下
1、页面添加打开告警声音开关按钮 2、首次进入页面时添加交互弹窗提示是否允许播放音频
以上两种方法原理都是一样的即添加交互事件触发音频播放功能 二、具体代码如下
templatedivel-button clickhandelPlay typeprimary开启声音/el-button// 默认声音只播放一次 如需设置循环播放 设置loopaudio idaudio controlscontrols refaudioRef :src音频文件地址 hidden playonPlayYour 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 四、寄语
人生岂能都如意万事只求半称心。 有舍有得有欢喜且行且远且珍惜。
童年的雨天最是泥泞却是记忆里最干净的曾经。
