Последнее обновление Chrome Desktop, запрещающее SoundJS воспроизводить звуки (связано с автоигрой)

Question

Я получаю это предупреждение JavaScript в последней версии Chrome Desktop, которая теперь запрещает автоматическое воспроизведение звука без участия пользователя: 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>