Javascript webkitAudioContext 在 Safari 中没有播放

Question

我正在尝试设置无法在 Safari 14.0.3 上运行的音频播放，但在 Chrome 88.0.4324.146 上运行良好。我有一个 returns AudioContext 或 webkitAudioContext 的函数。我遵循了这个答案：

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

Answer 1

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

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

playSound 函数检查 play() 方法是否 returns 一个承诺。如果是这样，那么该承诺应该有一个 .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);
});

如果您确实需要使用网络音频 API 来做一些事情，请告诉我。

Javascript webkitAudioContext 在 Safari 中没有播放

Javascript webkitAudioContext has no playback in Safari

javascript

audio

webkitaudiocontext

audiocontext