Audio having a weird behaviour while being played

4

You can use an HTML audio element.

<audio preload="auto" src="https://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%2011-909-Free-Loops.com.mp3"></audio>

<button>Play</button>

const audio = document.querySelector("audio");

document.querySelector("button").addEventListener("click", () => {
  audio.currentTime = 0;
  audio.play();
});

Having the audio element in the DOM when the page loads should/may make the browser prefetch the file. It might happen with or without the preload attribute. I believe most browsers will use metadata as the default value if the attribute is not added.

preload

The default value is different for each browser. The spec advises it to be set to metadata .

1 Like