关于 The AudioContext was not allowed to start 问题！

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量188 收藏
点赞数 3
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67009383/article/details/140497973
版权

问题

在一些场景中，我们需需求是在浏览器使用音视频的自动播放功能。但是chrome浏览器在2018年4月起，就在浏览器上全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出此错误。
在这里插入图片描述

解决办法

由于是浏览器的限制，目前有两种解决方法

  • 第一个是遵循浏览器限制，在自动播放前面然用户做一个主动交互行为
  • 第二个是用户自己主动设置：可以运行网站进行声音的播放，这样也可以避免问题，可以按照一下步骤尝试一下：
    1、打开浏览器设置，然后点击隐私和安全，点击网站设置
    在这里插入图片描述
    2、找到内容，更多内容设置
    在这里插入图片描述
    3、找到声音
    在这里插入图片描述
    4、点击添加在这里插入图片描述
完成第二种以上步骤就可以不使用用主动交互就可以自动播放声音
眼镜大马猴
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
The AudioContext was not allowed to start.
前端人的博客
04-17 1818
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
The AudioContext was not allowed to start(解决方案)
热门推荐
sinat_21234899的博客
11-26 1万+
The AudioContext was not allowed to start(解决方案)
谷歌浏览器播放mp3出现The AudioContext was not allowed to start.
tutuLee_wedo的博客
10-24 5568
1.网上通常的解决方案 在浏览器地址栏中输入chrome://flags/#autoplay-policy 然后在高亮的autoplay-policy选项中，将 右侧下拉菜单里 Default 换成 No user gesture is required 不知道什么原因在mac下 找不到该项（可能是浏览器版本或者系统问题）。 解决办法： 1.地址栏输入：chrome://flags/ 2...
The AudioContext was not allowed to start. It must be resumed after a user gesture on the page
alpha_xu_vvvvv的博客
09-22 1217
chrome的The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. document.documentElement.addEventListener("mousedown", () => { if (context.state !== "running") context.resume(); });
Chrome中js警告：The AudioContext was not allowed to start(解决方案)
10年职场两茫茫，35岁凄凉奈若何
03-18 4118
Chrome中js警告：The AudioContext was not allowed to start(解决方案)
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on .
あなたの可愛い41
11-19 8414
音乐自动播放报错 进入配置网站 对浏览器进行配置 edge://flags/#autoplay-policy 搜寻autoplay 将autoplay settings设置为enabled 之后就不会有报错了
【React-music项目问题】The AudioContext was not allowed to start. It must be resumed (or created) after a
Voiceu的博客
06-07 1万+
做项目的时候出现的问题：The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. 看这个意思是说必须要用户手动进行一个操作，才能启用音频的相关功能，不能一打开就自动调用， 查到的解决帖子：参考1 参考2 帖子中也是说要进行手动操作，比如加个btn，手动点击的时候就调用，然后再进行自己的项目想要的操作 ...
解决谷歌浏览器不能播放音乐的问题
dabao87的博客
12-11 7941
今天在做egret白鹭播放音乐的时候，在谷歌浏览器一直播放不了 报错： The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on ... 这是因为在新的谷歌浏览器中播放音乐被限制了，要修改安全策略 在谷歌浏览器上输入 : chrome://fla...
Host 主机名 is not allowed to connect the mysql server
01-07
Host 主机名 is not allowed to connect the mysql server 原因：没有授权远程访问mysql 解决方法： cmd 中运行mysql -u root -p（如果报mysql 不是内部或外部命令，找到安装mysql对应的bin文件夹运行mysql.exe，...
MYSQL拒绝访问报错not allowed to connect
12-15
message from server: “Host ‘****’ is not allowed to connect to this MySQL server 1:在登录mysql服务器 2:执行：GRANT ALL PRIVILEGES ON *.* TO ‘root’@’%’ WITH GRANT OPTION //赋予任何主机访问数据的...
jacob Hiding the application window is not allowed
01-02
设置隐试打开PPT报错 Hiding the application window is not allowed
Host 'localhost' Not Allowed To Connect To Server
03-27
标题 "Host 'localhost' Not Allowed To Connect To Server" 是一个常见的MySQL服务器错误，通常发生在尝试从本地主机连接到数据库服务时被拒绝的情况。这个错误意味着MySQL服务器的配置没有正确地允许来自localhost...
Android WebView 报 Not allowed to load local resource错误的解决办法
07-28
Android WebView 报 Not allowed to load local resource错误的解决办法 博客地址：http://blog.csdn.net/yuzhiqiang_1993/article/details/76228541
python爬虫基础——Webbot库介绍
qq_56262770的博客
07-22 990
Webbot是一个专为Python设计的库，用于简化网页自动化任务。它基于Selenium WebDriver，提供了一系列高级接口，使自动化任务更加直观和易于管理。Webbot库的设计理念是将复杂的网页交互抽象为简单的API调用，从而减少开发者在编写自动化脚本时的工作量。Webbot库的核心功能包括自动化表单填写、点击操作、数据抓取等，同时支持处理JavaScript渲染的页面和模拟用户行为。这些功能使得Webbot库成为自动化测试、数据收集和网页监控等领域的理想选择。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 298
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 246
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 301
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 989
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
05-17
这个错误是由于浏览器对自动播放音频的限制所导致的。为了避免自动播放音频对用户造成不必要的干扰，现代浏览器通常会禁止自动播放音频，除非用户在页面上进行了手势操作。 要解决这个问题，你需要在用户与页面进行交互后再开始播放音频。你可以在用户点击一个按钮或其他交互元素时触发音频播放，或者在用户滚动页面时开始播放音频。另外，你还可以使用 Web Audio API 中的 `resume()` 方法来恢复 AudioContext。例如： ``` window.addEventListener('click', function() { var context = new AudioContext(); context.resume().then(function() { // 在这里开始播放音频 }); }); ``` 这样，当用户点击页面时，就会创建一个新的 AudioContext 并恢复它，然后你就可以开始播放音频了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值