I have multiple audio files in a web page. I want them all to be ready to be played as soon as the page is loaded, but it is too heavy and useless to entirely preload all of them at once. So I want to preload only a certain amount of the audio and load the rest iff they are played (similar to the behavior we see on YouTube par example).
How can I do this on a HTML5 page (possibly using Javascript)?
We use preload=”auto” attribute to preload the audio file. The HTML Audio Preload Attribute is used to specify how the author thinks the audio should be loaded when the page loads. The audio preload attribute allows the author to indicate to the browser how the user experience of a website should be implemented.
The preload attribute specifies if and how the author thinks that the audio file should be loaded when the page loads. The preload attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
Method 2: JavaScript You may also load a sound file with JavaScript, with new Audio() . const audio = new Audio("freejazz. wav"); You may then play back the sound with the .
You could try something hacky like playing the first 10% of the file in an onload
listener.
However, from experience, I've found browsers only preload the start of audio content anyway. (If they preload anything: e.g. iOS, mobile chrome both refuse to preload.) In Firefox, for example, you can inspect the HTTP requests and you'll see that they're parital content requests which don't cover the whole file.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With