chrome浏览器禁止自动播放语音解决方案

项目背景

今年11月份有遇到一个项目现场,需要自动播放告警语音,但版本升级后自动播放语音的功能就不生效。不生效的场景如下,打开浏览器第一次播放语音能正常播放,但按F5刷新页面后,告警再次推送上来播放就会失败,听不到任何声音.....

问题分析

初步排查是不是浏览器语音播报的权限没有开,打开了F12看了配置声音那块,发现声音装置是有打开的,后面才发现这个是Chrome浏览器的自动播放策略导致的,下面直接插入一个大概图片说明一下这个策略

更多详细的了解可以参考developer.chrome.com/blog/autopl...

大概的意思就告诉大家,为了用户的体验不支持自动播放,但支持静音播放和交互播放。重要的是交互播放,只要我们在页面上点击了就可以进行音频播放,那个交互我们要怎么实现才好了......

解决方案

回去尝试了几次,考虑到产品的友好交互,我和产品经理大概讨论了一下,准备在我们的系统又上角的小喇叭做旁边做一个红色的感叹号用来提醒用户,告诉他当前浏览器由于xxx原因音频播放权限失效,点击红色感叹号重新解锁播放权限。使用这种诱导性的点击,让页面产生交互行为,由此获取音频播放权限,从而达到继续播放音频的效果,根据这个思路我们就开始吧

首先我们要自备一段音频,然后查看相应的播放权限,代码如下:

根据这个函数我们获取到在用户刷新页面后音频播放就会失效,从而对应失效后就设置对于的红色感叹号效果,这只是我这里业务引导用户的操作,我们也可以用弹出框,或者各种tips小提示框也行,只要用户鼠标点击或者移动就可以重新初始化语音播放的API,非常方便。

总结

通过这个方案,我们确实解决了语音首次播放后刷新页面播放失效的问题,我尝试了很多解决方案,有注册一个点击事件、iframe等,但均不生效,也想着有没有一种方案可以用户不用操作,页面就可以自动恢复播放语音的功能,但目前还是不行,只能采用引导用户进行页面交互来解决这个问题,当然你们有好的方式不妨留言给我,让我参考一下

相关推荐
Amy.Wang41 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景43 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼43 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter1 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录1 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉4 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句4 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript