网络自动播放策略更改恢复上下文不会取消静音

Posted 2023-03-07

【中文标题】网络自动播放策略更改恢复上下文不会取消静音

【英文标题】：web autoplay policy change resuming context doesn't unmute audio

【发布时间】：2018-05-07 15:57:08

【问题描述】：

我正在开发一个渐进式网络应用程序，主要用于桌面和安卓播放音乐。在 PC 上，一切正常。在 android 上，它突然停止工作。经过一番研究，我发现this 更新了关于 chrome 中自动播放策略更改的信息。

要点是，您不能再在没有用户交互的情况下播放媒体。

在此更新之前，我创建了 onload 的 AudioContext，然后才使用它。这不再起作用了。

更新帖子指出：

在文档接收到用户手势以启用音频播放后，必须创建或恢复 AudioContext

所以我对.suspend() 和.resume() 的上下文做了一些调整，相应地onPlay 和onPause 我的应用程序。

在 PC 上这仍然有效，但在 Android 上却不行。我错过了什么吗？

编辑 1：

我发现this 网站声明如下：

根据新政策，媒体内容将被允许自动播放 以下条件：

a) 内容已静音，或不包含任何音频（仅限视频）

b) 用户在浏览过程中点击或点击了网站上的某处 会话

c) 在移动设备上，如果网站已由用户添加到主屏幕

d) 在桌面上，如果用户经常在网站上播放媒体， 根据媒体参与指数

如果其中一项匹配，我理解这是正确的。在我的情况下，b) 和 c) 都满足了。 所以我想这应该工作？

【问题讨论】：

@Kaiido 嗯，我明白了。我想我必须看看如何同步执行此操作，因为到目前为止，我一直在使用 vuex 模块，在我的情况下，它会异步触发一个动作。也许我可以添加一个同步初始化动作或类似的东西。你能提供两种不同自动播放的来源吗？也许这将有助于消除我的困惑

不幸的是，这只是我自己的经验，可能不正确......（重新阅读您的错误信息往往会证明我错了）他们围绕这些政策改变了很多东西，并且文档很难粘在一起。但再次从经验来看，在所有 UA 上，在用户手势内部做出反应总是有效的。

关于这个问题的一些讨论：chrome groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… and specs github.com/WebAudio/web-audio-api/issues/836

所以我错了，看来他们确实对 AudioContext 和 MediaElement.autoplay 使用了相同的策略。现在我不知道为什么它对你不起作用，也许你尝试使用 AudioContext 的事实会引发一个错误，即使在用户授予所需的手势之后也会阻止正常行为？您可以通过检查 AudioContext 的 state 属性来阻止它。如果设置为"suspended"，则不要尝试任何操作。

感谢您的意见，非常感谢。我很确定在用户输入之前我没有使用上下文，因为我只有在用户单击“播放”某物时才开始从远程主机加载音频源。一旦加载完成，它就会被解码，上下文恢复然后播放。如果用户按下暂停，我会停止节点并暂停上下文，直到他再次点击播放。

【参考方案1】：

您需要在用户操作事件（例如按钮单击）的音频上下文上调用 resume()。我猜您的问题是您调用 context.resume() 的位置不在用户交互事件中。你不能只从 onLoad 中调用它。

示例代码：

// Existing code unchanged.
window.onload = function() 
  var context = new AudioContext();
  // Setup all nodes
  ...


// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() 
  context.resume().then(() => 
    console.log('Playback resumed successfully');
  );
);

文档在这里描述它：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio