对象方法中的本地变量音频无法播放

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线程和Stack Overflow问题，但找不到错误的定义，更不用说如何解决了。

我该如何解决？

只允许使用.wav文件，因为那是我的代码托管服务允许的唯一文件格式。

Answer 1

Audio.play（）返回一个Promise，当成功开始播放后，Promise将被解决。由于任何原因（例如权限问题）而无法开始播放，将导致承诺被拒绝。

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

就您而言，您的浏览器/操作系统似乎不允许自动播放音频。用户代理（浏览器）或操作系统不允许在当前上下文或情况下播放媒体。例如，如果浏览器要求用户通过单击“播放”按钮显式启动媒体播放，则可能会发生这种情况。这是参考。

就自动播放而言，您可能需要根据新的浏览器策略在HTML中添加AudoContext。 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

编辑

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