Chrome最新版本如何通过JS设置支持自动播放音频

众所周知，chrome浏览器在2018年4月起，就在浏览器上全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：

Uncaught (in promise) DOMException: play()

直到用户有交互之后，再次调用play()方法才会正常播放。但是对于开发来说，很多情况下我们还是需要让音频自动播放的，比如实时消息通知，有最新消息的话，播放提示音，这种情况下我们该怎么办呢？

网上的做法通常是在chrome地址栏输入chrome://flags/，然后设置Autoplay policy为No user gesture is required。但是当你升级到最新的85版本的时候，你会发现，连Autoplay policy这个政策都搜不到了，所以得另外想办法。

首先，我们在页面里创建一个播放器：

    <div class="margin-top-20" style="display: none;"><audio src="" id="audio" controls="controls" autoplay="autoplay"></audio></div>

说明：

src可以设置为空，后面可以通过JQ来动态加载音频文件（我这个项目就是采用的这种方式）；

也可以直接给音频文件地址，设置display为none，如果你不想看见这个音频播放器的话，因为设置了autoplay，所以打开页面会自动播放的。

Chrome最新版本如何通过JS设置支持自动播放音频相关推荐

Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
谷歌浏览器最新版本进行控制台调试js代码时候无法显示代码行数问题解决
谷歌浏览器最新版本进行控制台调试js代码时候无法显示代码行数问题解决问题描述-谷歌浏览器打开控制台进行js代码调试js代码没有行数显示. 问题原因最新版本谷歌浏览器进行了自动设置关闭那个功能,要自 ...
关于Chrome 69 版本一些改变以及设置
关于Chrome 69 版本一些改变以及设置前几天Google更新Chrome 69版本感觉变化是最大的,很多童鞋都不能适应- 关于Chrome 69 版本一些改变以及设置 Chrome 69浏 ...
如何在Ubuntu上安装最新版本的Node js
如何在Ubuntu上安装最新版本的Node.js 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs Node.js是一个软件平台,通常用于构建大规模的服务器 ...
android安卓最新版本,安卓X86最新版本发布，目前已支持大部分安卓程序
原标题:安卓X86最新版本发布,目前已支持大部分安卓程序说起安卓系统大家可能都十分的熟悉,但是要是说起安卓X86不知道大家知不知道,简单地来说,安卓X86就是一个能够运行在PC平台上的安卓系统. A ...
js设置页面语音播放
js设置页面语音播放 let msg = new SpeechSynthesisUtterance("喷子");console.log(msg)//msg.rate = 4 播放语 ...
js 自动播放音频文件，报警提示音等
js 自动播放音频文件,报警提示音等谷歌浏览器的音频,默认是不能在页面载入时直接自动播放的. 至少需要用户点击一下页面,才可以播放音频,这个策略的目的是保证用户的体验感,如果每个页面都能在用户未接触 ...
解决Chrome浏览器无法自动播放音频视频的问题，Uncaught(in promise) DOMException
转载http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动 ...
chrome不能自动播放音频的问题
在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频.就算你为video或audio标签设置了autoplay属性也一样不能自动播放. 设置方式: ...
解决Chrome浏览器无法自动播放音频视频的问题
谷歌浏览器做了改革,不再允许自动播放音频和视频.Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频. <video autoplay></video> 所以好多需 ...

Chrome最新版本如何通过JS设置支持自动播放音频

Chrome最新版本如何通过JS设置支持自动播放音频相关推荐

最新文章

热门文章