项目背景
今年11月份有遇到一个项目现场，需要自动播放告警语音，但版本升级后自动播放语音的功能就不生效。不生效的场景如下，打开浏览器第一次播放语音能正常播放，但按F5刷新页面后，告警再次推送上来播放就会失败，听不到任何声音.....
问题分析
初步排查是不是浏览器语音播报的权限没有开，打开了F12看了配置声音那块，发现声音装置是有打开的，后面才发现这个是Chrome浏览器的自动播放策略导致的，下面直接插入一个大概图片说明一下这个策略
更多详细的了解可以参考developer.chrome.com/blog/autopl...
大概的意思就告诉大家，为了用户的体验不支持自动播放，但支持静音播放和交互播放。重要的是交互播放，只要我们在页面上点击了就可以进行音频播放，那个交互我们要怎么实现才好了......
解决方案
回去尝试了几次，考虑到产品的友好交互，我和产品经理大概讨论了一下，准备在我们的系统又上角的小喇叭做旁边做一个红色的感叹号用来提醒用户，告诉他当前浏览器由于xxx原因音频播放权限失效，点击红色感叹号重新解锁播放权限。使用这种诱导性的点击，让页面产生交互行为，由此获取音频播放权限，从而达到继续播放音频的效果，根据这个思路我们就开始吧
首先我们要自备一段音频，然后查看相应的播放权限，代码如下：
根据这个函数我们获取到在用户刷新页面后音频播放就会失效，从而对应失效后就设置对于的红色感叹号效果，这只是我这里业务引导用户的操作，我们也可以用弹出框，或者各种tips小提示框也行，只要用户鼠标点击或者移动就可以重新初始化语音播放的API，非常方便。
总结
通过这个方案，我们确实解决了语音首次播放后刷新页面播放失效的问题，我尝试了很多解决方案，有注册一个点击事件、iframe等，但均不生效，也想着有没有一种方案可以用户不用操作，页面就可以自动恢复播放语音的功能，但目前还是不行，只能采用引导用户进行页面交互来解决这个问题，当然你们有好的方式不妨留言给我，让我参考一下