Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to preload only part of a audio file in html5/JS?

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)?

like image 271
Niccolò Avatar asked Dec 18 '13 02:12

Niccolò


People also ask

How do I preload audio in HTML?

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.

What is the use of preload auto attribute in audio?

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.

How do I load an audio file into JavaScript?

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 .


1 Answers

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.

like image 120
Jeremy Avatar answered Oct 30 '22 23:10

Jeremy