Аудио локальной переменной в методе объекта не воспроизводится

Question

Я создаю игру и хочу, чтобы звуки играли на происходящих событиях. В настоящее время у меня есть объект, который выглядит следующим образом:

var soundObject = {
    invaderShoot: function() {
        var audio = new Audio("laser.wav");
        audio.play();
    },
    //Many more of the same method
};

А потом я играю такие звуки:

soundObject.invaderShoot();

Однако, когда я пытаюсь это сделать, появляется следующая ошибка:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

И он подсвечивает эту строку в методе:

audio.play();

В чем проблема? Я искал темы GitHub и вопросы переполнения стека, но не могу найти определение того, что это за ошибка, не говоря уже о том, как ее исправить.

Как мне это исправить?

Мне разрешено использовать только .wav файлы, потому что это единственный формат файлов, который разрешает моя служба размещения кода.

Answer 1

Из прикрепленной ошибки кажется, что проблема связана с тем, что авто / аудио воспроизведение по умолчанию отключено. Это, конечно, имеет практическое значение для пользователя, поскольку уменьшает количество злоупотреблений, хотя и добавляет. Однако для вашей ситуации это означает, что вы не можете создать аудио объект на лету.

Вместо этого вы должны создать его заранее и просто переключить URL / возобновить звук, когда вам это нужно. Следующий фрагмент из прилагаемого билета выглядит многообещающим.

// sm2 attaches the audio element as sound._a
let audio = sound._a;
audio.crossOrigin = 'anonymous';
sound._sourceNode = audioContext.createMediaElementSource(audio);
sound._sourceNode.connect(inputNode);

function play() {
  /**
   * If an AudioContext is created prior to the document receiving a
   * user gesture, it will be created in the "suspended" state, and
   * you will need to call resume() after a user gesture is
   * received.
   */
    audioContext.resume().then(() => {
        sound.play();
    });
}

https://github.com/scottschiller/SoundManager2/issues/178

Answer 2

Audio.play () возвращает Обещание, которое разрешается после успешного запуска воспроизведения. Невозможность начать воспроизведение по любой причине, например, из-за проблем с разрешениями, приводит к отклонению обещания.

const playedPromise = audio.play();
if (playedPromise) {
        playedPromise.catch((e) => {
            if (e.name === 'NotAllowedError' ||
                e.name === 'NotSupportedError') {
                //console.log(e.name);
            }
        });
    }

В вашем случае, похоже, ваш браузер / ОС не позволяет автоматически воспроизводить аудио. Пользовательский агент (браузер) или операционная система не разрешает воспроизведение мультимедиа в текущем контексте или ситуации. Это может произойти, например, если браузер требует, чтобы пользователь явно запустил воспроизведение мультимедиа, нажав кнопку «воспроизведение». Здесь является ссылкой.

Что касается автозапуска, вам может потребоваться добавить AudoContext в ваш HTML в соответствии с новой политикой браузера. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

EDIT

window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  ...
}
context.resume().then(() => {
    audio.play();
    console.log('Playback resumed successfully');
  });