0

我正在尝试设置无法在 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

4

1 回答 1

1

我已尽我所能制作一个仅使用 Web Audio API 的示例，但可惜 Safari 与此 API 不太兼容。尽管可以将它与 结合使用HTMLAudioElement，但除非您想操纵音频；你不需要它。

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

该playSound函数检查该play()方法是否返回一个承诺。如果确实如此，那么该承诺应该有一个.catch()障碍。否则它将Unhandled Promise Rejection在 Safari 中引发错误。

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 来做一些事情，请告诉我。

于 2021-02-09T22:20:06.430 回答