javascript - 最新的 Chrome 桌面更新阻止 SoundJS 播放声音(与自动播放相关)

Question

我在最新版本的 Chrome 桌面上收到此 JavaScript 警告，它现在可以防止在没有用户交互的情况下自动播放声音:http://bgr.com/2018/03/22/google-chrome-autoplay-videos-sound-block/

所以我在我的控制台日志中收到此错误/警告:“不允许启动 AudioContext。它必须在页面上的用户手势后恢复(或创建)”

有什么方法可以让我在用户交互时恢复声音或 SoundJS 的音频上下文，例如页面上的点击或键盘事件？

我的设置是使用 preloadJS 加载我的 MP3，如下所示:

queue.loadManifest([
  {id: 'sndScore', src: 'sndScore.mp3'}
]);

然后我像这样播放声音:

createjs.Sound.play("sndScore");

我试着放一个标志 var unitInteracted= false;然后，如果用户与页面交互，我将其设置为 true，并像这样修改我的声音播放代码，以确保在我尝试播放声音之前已与页面交互:

if (unitInteracted) {                                
  createjs.Sound.play("sndScore");
}

...但出于某种原因，我仍然收到上述错误/警告并且页面最终仍然静音。一旦 Chrome 说:“不允许启动 AudioContext。必须在页面上的用户手势后恢复(或创建)它”，有什么方法可以取消静音？

谢谢!

Answer 1

我没有深入阅读 SoundJS 的源代码，但似乎 PreloadJS 会触发 AudioContext 的创建。

因此，为避免这种情况，您可能只需要在用户手势事件中开始获取资源:例如，您可以向用户展示启动画面，并且只有在他们单击其上的按钮后，您才会开始获取您的音频资源:

// wait for user gesture
btn.onclick = e => {
  // now we can load our resources
  var queue = new createjs.LoadQueue();
  queue.installPlugin(createjs.Sound);
  queue.on("complete", handleComplete, this);
  queue.loadFile({
    id: "sound",
    src: "https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3"
  });
  btn.disabled = true;
  // and show our user we are loading things
  btn.textContent = 'loading';
};

function handleComplete() {
  // now we can play our sounds without issue
  btn.disabled = false;
  btn.textContent = 'play';
  btn.onclick = e =>
    createjs.Sound.play("sound");
  // we don't need a user gesture anymore
  setTimeout(btn.onclick, 2000);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/SoundJS/1.0.2/soundjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PreloadJS/1.0.1/preloadjs.min.js"></script>

<!-- make it part of a splash-screen -->
<button id="btn">Let's start the awesome</button>