最新的 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>