音频启动遇阻：AudioContext无法启动

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 the page”。这一信息不仅仅是一个简单的报错，更是对我们前端开发技术能力的考验。

最近，我参与了一个安防项目的开发，其中涉及到视频播放器的自动播放功能。由于视频流和视频存储都依赖于第三方服务，而在微信小程序中使用这些服务又存在诸多限制，因此我们决定采用一种大胆的方案：编写一个自动脚本，当有告警消息时，能够自动打开网页、播放视频并录频，最后将录制好的视频自动上传到我们的服务器。

在实施这一方案的过程中，我们却遭遇了种种问题。其中，最让我们头疼的，便是这个关于AudioContext的错误。

二、问题描述

在开发过程中，我们习惯使用谷歌浏览器作为默认浏览器进行测试。起初，视频确实能够自动播放，但在结束录频时，却突然报出了上述错误。这个错误表明，浏览器禁止了音频的自动播放功能，要求必须有用户的主动操作才能继续。

事实上，从2018年4月起，谷歌浏览器就开始全面禁止音视频的自动播放功能。这一举措旨在提升用户体验，防止不必要的音视频内容对用户造成干扰。对于我们这种需要自动播放的场景来说，这无疑是一个巨大的障碍。

我们尝试在页面加载完毕后，通过js直接调用.play()方法来播放视频，但每次都会抛出同样的错误。这让我们意识到，单纯的调用方法并不能绕过浏览器的限制。

为了解决问题，我们尝试了其他浏览器。首先是火狐浏览器，刚开始时确实没有出现错误，但运行一段时间后，同样的问题再次出现。错误信息表明，无法自动录制视频，这与谷歌浏览器的错误本质上是一样的。接着，我们又尝试了Opera浏览器，结果依然令人失望。

面对这样的困境，我们不得不开始深入挖掘问题的根源，寻找解决方案。

三、爬坑经历

在解决问题的过程中，我们尝试了各种方法，但大多数都以失败告终。这里，我挑选了几个典型的爬坑经历与大家分享。

爬坑1：使用Chrome Flags调整策略

我们首先想到的是通过调整浏览器的设置来解决问题。在谷歌浏览器中，有一个名为chrome://flags/的页面，其中包含了各种实验性功能和设置选项。我们希望通过修改其中的Autoplay policy选项来允许音视频的自动播放。

当我们打开chrome://flags/页面时，却发现找不到Autoplay policy的选项。经过一番搜索，我们得知谷歌已经弃用了这个页面，相关的设置已经被移到了其他地方。这一发现让我们感到十分沮丧，原本以为能够轻松解决的问题，却突然变得遥不可及。

爬坑2：使用AudioContext播放音频

既然无法通过修改浏览器设置来解决问题，我们开始尝试其他方法。其中，一个看似可行的方案是使用AudioContext来播放音频。AudioContext是Web Audio API的一部分，它允许我们在浏览器中处理音频数据。我们希望通过创建一个AudioContext对象，并调用其start()方法来绕过浏览器的自动播放限制。

当我们尝试实现这个方法时，却遇到了新的问题。由于我们的项目依赖于第三方SDK，而该SDK并没有提供直接操作AudioContext的接口，因此我们无法直接控制音频的播放。此外，即使我们能够操作AudioContext，也面临着浏览器兼容性的问题。一些老版本的浏览器可能不支持AudioContext，或者对其的支持不够完善。

爬坑3：给audio标签添加自动播放属性

在尝试了上述两种方法后，我们开始考虑更加直接的方式：给audio标签添加自动播放属性。这个方案同样存在问题。我们的项目中使用的是视频播放器，而不是单独的audio标签。即使我们能够在视频播放器中嵌入audio标签，也无法保证浏览器会尊重这个自动播放属性。毕竟，浏览器的自动播放策略是针对所有音视频内容的，而不是针对某个特定的标签或元素。

经过一系列的尝试和失败，我们开始意识到，这个问题可能比我们想象的要复杂得多。单纯的修改浏览器设置或添加标签属性可能无法解决问题，我们需要从更深层次上理解浏览器的自动播放策略，并寻找更加有效的解决方案。

四、解决方案

在经历了一系列的失败后，我们终于找到了一个可行的解决方案。这个方案不需要修改浏览器的设置或添加额外的标签属性，而是通过调整我们的自动脚本来实现。

具体来说，我们的解决方案包括以下几个步骤：

第一步：打开谷歌浏览器并进入设置

我们需要打开谷歌浏览器，并点击右上角的菜单按钮。在弹出的菜单中，选择“帮助”选项，然后点击“关于Google Chrome”，进入浏览器的设置页面。

第二步：找到并修改网站设置

在设置页面中，我们需要找到“网站设置”选项。这个选项通常位于页面的左侧或中部位置，可以通过滚动页面或使用搜索功能来快速定位。

找到“网站设置”后，我们需要点击它进入详细的设置页面。在这个页面中，我们可以看到各种与网站相关的设置选项，包括声音、摄像头、麦克风等。

第三步：添加网址并允许声音

在“网站设置”页面中，我们需要找到“声音”选项，并点击它进入声音设置页面。在这个页面中，我们可以看到一个列表，其中列出了所有已经访问过并产生过声音的网站。

接下来，我们需要将我们的网站地址添加到这个列表中，并允许它播放声音。这可以通过点击“添加”按钮并输入我们的网址来实现。添加完成后，我们的网站就会出现在列表中，并且声音选项会被设置为“允许”。

第四步：测试并验证解决方案

完成上述设置后，我们需要重新运行我们的自动脚本，并观察是否能够成功播放视频和录制音频。如果一切正常，那么我们就成功地解决了这个问题。

需要注意的是，这个解决方案并不仅限于谷歌浏览器。事实上，火狐、Opera等其他主流浏览器也提供了类似的设置选项。因此，无论使用哪种浏览器，我们都可以采用类似的方法来解决问题。

五、总结

通过这次问题的排查与解决，我们深刻体会到了前端开发的复杂性和挑战性。一个小小的自动播放功能，背后却隐藏着如此多的技术细节和限制。正是这些挑战和困难，让我们不断学习和成长，不断提升自己的技术能力和解决问题的能力。

回顾整个问题解决过程，我们经历了从最初的盲目尝试到后来的深入分析，再到最终的成功解决。这个过程中，我们遇到了许多困难和挫折，但也收获了许多宝贵的经验和教训。

我们认识到了浏览器自动播放策略的重要性和必要性。这些策略旨在保护用户的隐私和体验，防止不必要的音视频内容对用户造成干扰。因此，在开发过程中，我们需要充分考虑这些策略的限制和要求，避免违反它们导致的问题。

我们学会了如何从更深层次上理解问题并寻找解决方案。在面对复杂的技术问题时，我们不能仅仅停留在表面现象上，而是要深入剖析问题的本质和根源，从而找到更加有效的解决方法。

我们也意识到了团队合作和沟通的重要性。在这次问题解决过程中，我们团队成员之间进行了充分的讨论和交流，共同分享了彼此的经验和想法。这种团队合作和沟通不仅有助于我们更快地找到问题解决方案，还能够提升整个团队的凝聚力和战斗力。

总之，这次问题的排查与解决是一次宝贵的经历。它不仅让我们学会了如何面对和解决技术问题，更让我们深刻体会到了技术挑战和团队合作的魅力。在未来的工作中，我们将继续保持学习和探索的精神，不断提升自己的技术能力和解决问题的能力，为项目的成功贡献自己的力量。