Does the html5 <audio> tag download audio from the server before activation?

Question

I did not quite know how to formulate the question, but here is the code ...

<audio class='foo' preload='none'> <source src='./path.mp3'> </audio> 

Then I have jQuery that plays the clip when I click this function ...

 function play(parent, child) { $(parent).find(child).find('.bar').click(function() { $('.word-audio')[0].play(); }); } 

My question is, does this audio file transfer when loading html or when a button is clicked? I would like to load data only at the click of a button, since my page can have hundreds of them.

Answer 1

Your code does not download audio. This is because you are using the preload="none" attribute. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio . This behavior is part of the W3 standard, not just Firefox; see https://www.w3.org/wiki/HTML/Elements/audio .

Answer 2

I think this description will clear your exits ...

 <audio preload="auto|metadata|none"> 

Attribute values

auto . The author believes that the browser should download the entire audio file when loading the metadata page. The author believes that the browser should only load metadata when loading the none page. The author believes that the browser should not download the audio file when the page loads.

Answer 3

YES. You need to configure preload none if you want to stop the load, but there is one problem:

When someone clicks the audio and stops it, play another one and stop in the middle of listening; all the stopped audio will continue to load the background.

The only way to stop this is to download all audio links via PHP and iframe.

In one PHP you need to configure your audio player. On your page, where you display audio lists, you only need to display the image and name, and when someone clicks the audio, you need to send the identifier of your audio to PHP, where the audio player is located, and upload to the page, for example, iframe.

After someone stops the sound, you need to stop the sound and destroy the iframe.