页面中添加声音提醒,并设置自动播放(谷歌浏览器已不支持自动播放)

本文介绍了如何在Vue.js页面中利用HTML5的audio元素添加声音提醒,由于谷歌浏览器不再支持自动播放,文章提供了解决方案,包括设置音频循环播放、静音播放以及通过WebSocket触发播放。同时,还展示了通过图标反馈音频状态,如播放时图标变大变红的设计。
摘要由CSDN通过智能技术生成

使用h5的audio,支持三种格式,我用的mp3格式,在vue页面中写的,并设置了播放时自动放大,变红动作

1、html <i>是图标,变色和放大用的,audio是隐藏的,loop是循环播放,controls是有播放暂停, muted为静音播放,此操作为解决谷歌禁用自动播放

<i class="el-icon-bell admin-header-setting" :style="{'color':alarmColor,'transform':alarmScale}"></i>告警
<audio :src="alarmAudioDefault" ref="myaudio" controls="controls" loop="true" muted="true" v-show="false"></audio>

2、变量

data() {
        return {
            alarmAudioDefault: "/audio/6.mp3",
            alarmColor: "",
            alarmScale: "scale(1)",
            ws: null
        }
}

3、我是用的WebSocket触发的

mounted() {
    // 此操作是为了任意点击解锁静音,实现谷歌自动播放
        document.body.addEventListener(
            "mouse
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值