时间戳

首页 > 解决方案 > 网络自动播放策略更改恢复上下文不会取消静音

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

问题描述

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

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

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

更新帖子指出：

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

因此，我相应地对我的应用程序.suspend()和.resume()上下文进行了一些调整。onPlayonPause

在 PC 上这仍然有效，在 Android 上则无效。我错过了什么吗？

编辑1：

我发现这个网站说明了以下内容：

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

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

b) 用户在浏览会话期间点击或点击了网站上的某处

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

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

如果其中一个匹配，我理解这是真的。在我的情况下，b) 和 c) 都满足了。所以我想这应该有效吗？

标签： javascriptgoogle-chromeautoplayweb-audio-apiaudiocontext

解决方案

您需要在用户操作事件（例如按钮单击）的音频上下文上调用 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

推荐阅读