在短时间内多次播放音频时，Safari的性能会降低

Question

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

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（）方法   是由用户操作触发的。

我认为您无法避免因每次按下按键都发出请求而导致性能下降。