页面无法自动播放音频的解决方案

问题描述:

最近在做一个客服电话平台(电话呼出呼入),因为里面使用了webRTC实现了软电话功能,所以现在电话呼入之后,页面弹出接听弹窗并且播放来电铃声,提醒用户接听所以就使用了audio标签的play() 做自动播放(很久以前这么做过),但是没想到报错如下:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

原因分析:

官方解释:最早是为了节约移动端的带宽和仿扰民(广告自动播放音频)阻止了自动播放,只有用户在页面上有交互动作后,才可以自动播放;

后来,紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放,也就是说 在桌面版浏览器也将失效。


解决方案:

方法一:对应视频来说,把音视频加一个muted的属性(静音)就可以自动播放,这样会显示一个声音被关掉的按钮。

但是,如果只是一个音频的播放,如果背景音乐,或者我遇到的来电铃声这种情况,可以用一下方式处理:

方法二:在页面加载完成后,弹窗提示让用户点击可以自动播放音频

页面无法自动播放音频的解决方案_第1张图片

方法三:监听页面,判断页面交互了即有点击操作了之后自动播放

紧接着:在用户点击之后,将音频自动播放,并且静音,然后再需要的时候关掉/开启禁音即可!

参考文章:Chrome 66禁止声音自动播放之后

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出

对博客文章的参考,若原文章博主介意,请联系删除!请原谅

 

你可能感兴趣的:(JavaScript,音视频,自动播放音频,chrome)