Does the html5 <audio> tag load the audio from the server before activating?

Question

I didn't quite know how to phrase the question, but here is the code...

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

I then have some jQuery that plays the clip when clicked with this function...

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

My question is whether this transfers the audio file when the html loads or when the button is clicked? I would like to only be loading data when buttons are clicked since my page could possibly have hundreds of these.

Answer 1

I think this description will clear your douts...

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

Attribute Values

auto : The author thinks that the browser should load the entire audio file when the page loads
metadata : The author thinks that the browser should load only metadata when the page loads
none : The author thinks that the browser should NOT load the audio file when the page loads.

Answer 2

Your code is not preloading the audio. This behavior 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.