Android Chrome 浏览器默认禁止音频自动播放,但可以通过修改系统配置参数允许这个功能。

在 Android Chrome 60.X 版本之前,chrome://flags 中有一个 disable-gesture-requirement-for-media-playback 的选项,在浏览器中输入 chrome://flags/#disable-gesture-requirement-for-media-playback 将该选项应用后即可。

从 Android Chrome 60.X 版本开始,这个选项被移除了,取而代之的是一个名为 Autoplay policy的选项。

在浏览器中输入 chrome://flags/#autoplay-policy,然后在高亮的选项中,将Default 改成 No user gesture is required 然后重启浏览器即可。

Chrome 66.X 至 69.X 的浏览器版本默认也禁止了音频自动播放,同样也可采用修改 autoplay-policy 选项方式来允许该功能。

检测是否支持自动播放:

function testAutoPlay () {

// 返回一个promise以告诉调用者检测结果

return new Promise(resolve => {

const audio = document.createElement('audio');

// require一个本地文件,会变成base64格式

// audio.src = require('/src/assets/alert.mp3');

audio.src = 'data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA';

document.body.appendChild(audio);

const onLoad = (isSupport) => {

audio.remove();

resolve(isSupport);

};

// play返回的是一个promise

audio.play().then(() => {

// 支持自动播放

onLoad(true);

}).catch(err => {

console.log(err);

// 不支持自动播放

onLoad(false);

});

});

}

testAutoPlay().then(isSupport => console.log(isSupport));

附:

谷歌浏览器音频自动播放HTML,修改系统设置让 Chrome 浏览器支持音频自动播放相关推荐

  1. android 浏览器 dlna,基于dlna跨屏播放的方法及系统、浏览器端装置和播放装置的制造方法...

    基于dlna跨屏播放的方法及系统.浏览器端装置和播放装置的制造方法 [技术领域] [0001]本发明涉及多媒体播放技术领域,具体涉及一种基于DLNA跨屏播放的方法及系统.浏览器端装置和播放装置. [背 ...

  2. Chrome浏览器密码框自动填充的bug

    在系统开发过程中,有一个难啃的bug从入职以来都在debug,一直以为是下拉框控件导致的问题.所以这个问题一直就搁浅了.今儿bug重提,就一步步找原因,排除了下拉控件select2的原因,才发现是在C ...

  3. 智能水表自动抄表协议cjt188远传协议,支持地址自动分配检查,灵活好用、Mbus通讯测试工具是一款水表等设备的测试工具

    智能水表自动抄表协议cjt188远传协议,支持地址自动分配检查,灵活好用.Mbus通讯测试工具是一款水表等设备的测试工具,真实有效可靠,可读取写入表计地址,发送标准188读计量数据.控制码等命令,可设 ...

  4. c语言自动填表chrome网页,教你设置Chrome浏览器里的自动填表功能

    [IT168 应用]大家在进行网络购物或者一些网站注册时,往往需要填写收货的地址以及信用卡的支付信息,如果每次都要填写这些信息,显然会非常复杂,并且可能因为没有记住而去再次查询确认身份的信息等. 通过 ...

  5. chrome浏览器下audio自动播放的hack

    前言 也许很多前端遇到过这个需求:消息提醒. 一般来说,可以简单的实现绝不会用复杂的方式,audio标签提供了这个功能. 但是,新版的chrome浏览器禁止了js自动播放音频的功能,见鬼了. 音频播放 ...

  6. 苹果微信html音乐播放,HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio

    本篇教程探讨了HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...

  7. Achshar Player:把Chrome浏览器当作本地音乐播放器使用

    Chrome是一款优秀的网页浏览器,你有没有想过,它除了能够用来浏览网页之外,还能用来干什么?Achshar Player这个扩展的作者会告诉你,谷歌浏览器还可以完全作为一个音乐播放器使用!拿chro ...

  8. python实现12306自动抢票脚本-splinter结合chrome浏览器

    ---------------------------------------------------------------------------------------------------- ...

  9. 因为修改系统设置导致edge浏览器打不开的最快解决办法

    设置-应用-应用与功能,然后找到Microsoft edge点击修改进行修复

最新文章

  1. 我在大厂,下班了也戴着工牌
  2. anaconda python降级_anaconda 使用的一些体验与困惑
  3. 怎么设置matlab滑块的值,matlab - 如何根据另一个滑块更改滑块的最大值 - SO中文参考 - www.soinside.com...
  4. (原)调用jpeglib对图像进行压缩
  5. 销售科目确认相关配置
  6. 问题引发由于与GI相关的python脚本中的错误,Gnome终端无法启动
  7. C#微信公众号开发 -- (七)自定义菜单事件之VIEW及网页(OAuth2.0)授权
  8. Leetcode--461. 汉明距离
  9. 计算机二级学校查询,计算机等级考试查询系统
  10. 源码安装python3.7.0
  11. 全方位测评Hive、SparkSQL、Presto 等七个大数据查询引擎,最快的竟是……| 程序员硬核测评...
  12. 渐变虚框及边框滚动的实现
  13. 搭建基于LAMP的web应用程序平台
  14. .net byte转java byte_「Java知识收集整理」Java语法的基础
  15. 经验分享:我是如何在网店无货源情况下快速出单?
  16. C语言小项目——电子秒表(毫秒级)
  17. tftp服务器配置及说明
  18. [交换最小值和最大值] 本题要求编写程序,先将输入的一系列整数中的最小值与第一个数交换,然后将最大值与最后一个数交换,最后输出交换后的序列。 注意:题目保证最大和最小值都是唯一的。
  19. Logistic Regression - IBM 员工离职预测
  20. 继电器在交流应用时的zero-crossing

热门文章

  1. Windows 常用网络命令
  2. regnam r语言_R语言分析上海日料店价格和评价之前的联系
  3. 读书笔记001:《过得刚好》郭德纲著 摘录
  4. 最热门的android组件和工具(3)
  5. CSS3 新特性transform,transition,animation
  6. 计算机视觉、机器学习、自然语言处理、机器人技术、语音识别等人工智能技术的应用
  7. 固始计算机学校,固始职业教育中心2021年招生简介
  8. 二叉树的最近公共祖先(Java)
  9. PCAN-View点了Reset后无法接收报文
  10. echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点