Javascript webkitAudioContext 在 Safari 中没有播放答案

【问题标题】：Javascript webkitAudioContext has no playback in SafariJavascript webkitAudioContext 在 Safari 中没有播放
【发布时间】：2021-02-09 20:12:19
【问题描述】：

我正在尝试设置无法在 Safari 14.0.3 上运行的音频播放，但在 Chrome 88.0.4324.146 上运行良好。我有一个返回 AudioContext 或 webkitAudioContext 的函数。我跟着这个答案：https://stackoverflow.com/a/29373891/586006

var sounds;
var audioContext

window.onload = function() {
    audioContext = returnAudioContext()
    sounds = {
        drop : new Audio('sounds/drop.mp3'),
        slide : new Audio('sounds/slide.mp3'),
        win : new Audio('sounds/win.mp3'),
        lose : new Audio('sounds/lose.mp3'),
    }
    
    playSound(sounds.drop)

}
    
function returnAudioContext(){
    var AudioContext = window.AudioContext // Default
        || window.webkitAudioContext // Safari and old versions of Chrome
        || false; 

    if (AudioContext) {
        return new AudioContext;
    }
}

function playSound(sound){
    audioContext.resume().then(() => {
        console.log("playing sound")
        sound.play();
    });
}

现场示例：http://www.mysterysystem.com/stuff/test.html

【问题讨论】：

你忘了在return new AudioContext;调用一个新实例，那应该是return new AudioContext();
该更改在 Safari 上仍然无效。
你能举一个我们也可以在Safari中运行的例子吗？这可能会让我们更深入地了解问题所在。
当然可以。使用实时示例编辑帖子。注意这个例子没有return new AudioContext();，但我也试过了，还是不行。
非常感谢，这有帮助。你能解释一下audioContext.resume() 的作用以及它存在的原因吗？另请注意，您将 HTMLAudioElement (new Audio()) 与 Web Audio API 结合在一起，虽然它们可以一起工作，但它们是分开的。

标签： javascript audio audiocontext webkitaudiocontext

【解决方案1】：

我已尽最大努力制作一个仅使用 Web Audio API 的示例，但遗憾的是，Safari 与此 API 不太兼容。虽然可以将它与HTMLAudioElement 结合使用，但除非你想操纵音频；你不需要它。

当您单击文档中的任意位置时，以下示例将播放掉落声音。它可能需要点击 2 次，因为浏览器中的音频对于何时播放或不播放可能非常严格。

playSound 函数检查 play() 方法是否返回一个承诺。如果是这样，那么该承诺应该有一个 .catch() 块。否则会在 Safari 中抛出Unhandled Promise Rejection 错误。

const sounds = {
  drop: new Audio('sounds/drop.mp3'),
  slide: new Audio('sounds/slide.mp3'),
  win: new Audio('sounds/win.mp3'),
  lose: new Audio('sounds/lose.mp3'),
};

function playSound(audio) {
  let promise = audio.play();
  if (promise !== undefined) {
    promise.catch(error => {
    console.log(error);
    });
  }
}

document.addEventListener('click', () => {
  playSound(sounds.drop);
});

如果您确实需要使用 Web Audio API 来做一些事情，请告诉我。

【讨论】：

这仅适用于点击处理程序。看起来 Safari 无论如何都需要在某种程度上为声音事件进行交互。
嗯，是的，所有浏览器都可以。除非你“破解”你的方式。这是为了防止在访问网站时播放不需要的声音。