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

项目背景

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

问题分析

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

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

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

解决方案

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

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

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

总结

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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8509 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的10 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀11 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce12 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L12 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop14 小时前
05-ES6
前端·javascript·es6
Heo14 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端