Safari 在短时间内多次通过自身播放音频时性能下降

Question

我正在尝试在 keydown 上播放声音。 为此，我看到解决方案是克隆声音并播放新实例：

var promise = sound.cloneNode(true).play();

在线复制： https://jsfiddle.net/alvarotrigo/up4c6m95/13/

这似乎在 Chrome 和 Firefox 中运行良好。但是在 Safari 中，这会导致性能不佳。

尝试用双手快速打字以重现错误。

请注意，我添加了一个 gif 图像，在快速输入时会出现延迟。 这当然也可以在 Safari 开发工具上注意到，如下图所示：

完整代码在这里：

var sound = new Audio('https://www.w3schools.com/html/horse.mp3');

document.addEventListener('keydown', playSound);


function playSound() {
  //in order to play the same sound over itself
  var promise = sound.cloneNode(true).play();

  //we just dont want to show the console error when autoplay is disabled :)
  if (typeof promise !== undefined) {
    promise.then(function() {
      // Autoplay started!
    }).catch(function(error) {
      //error
    });
  }

}

Answer 1

Safari 每次都会为正在播放的音频文件发出请求，而另一方面，Firefox 和 Chrome 则并非如此，因为它们往往只加载一次。

在 iOS 上的 Safari 中（适用于所有设备，包括 iPad）...在用户启动数据之前不会加载数据。 这意味着 JavaScript play() 和 load() 方法也处于非活动状态 直到用户开始播放，除非 play() 或 load() 方法 由用户操作触发。

我认为您无法解决导致每次按键都发出请求的缓慢性能。