Tuesday, 22 January 2019

Safari slow performance when playing audio over itself multiple times in a short time

I'm trying to play a sound over itself on keydown. In order to do so, I saw the solution is to clone the sound and play the new instance instead:

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

Reproduction online: https://jsfiddle.net/alvarotrigo/up4c6m95/13/

This seems to be working fine in Chrome and Firefox. However in Safari this results in bad performance.

Try typing very fast with both hands to reproduce the error.

Note I added a gif image that lags when typing very quickly. This can of course be noted as well on the Safari dev tools as can be seen in the picture below:

enter image description here

Whole code here:

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
    });
  }

}



from Safari slow performance when playing audio over itself multiple times in a short time

No comments:

Post a Comment