Question

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

所以我在控制台日志中收到此错误/警告：＆＃34;不允许启动AudioContext。必须在页面上的用户手势后恢复（或创建）＆＃34;

有没有办法让我在用户交互时恢复声音或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会说：＆＃34;不允许启动AudioContext，以便取消静音。必须在页面上的用户手势后恢复（或创建）＆＃34;？

谢谢！

Answer 1

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

所以为了避免这种情况，您可能只需要在用户手势事件中开始获取资源：例如，您可以向用户显示启动画面，只有当他们点击其上的按钮时，您才会开始获取音频资源：

＆＃13;

// 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);
}

＆＃13;

<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>

＆＃13;

最新的Chrome桌面更新，防止SoundJS播放声音（与自动播放相关）

1 个答案: