HTML5 / jQuery - What is the correct way to preload audio?

Question

I created a game on which there are several elements on the page, when the mouseover event is triggered on the element, a sound file is played.

His work, however,

My question is: what is the correct way to preload the audio? Therefore, I can be sure that my sound is reproduced as soon as the user interacts with the element.

I am currently initializing my audio object on hover

$('.circle').mouseover(function() { // retrieve ref from data- attribute var noteIndex = $(this).attr('data-note'); // locate url from the array notes using noteIndex ref var snd = new Audio(notes[noteIndex]); snd.play(); } 

I know the Audio tags, but I'm not sure how this differs from my technique above.

EDIT: example of how I download audio http://jsfiddle.net/kA5Bv/1/ (note that the key does not play right away because the example audio files that I used have a gap of 1/2 second or so in beginning)

Thanks in advance Cam

Answer 1

How about $ (document) .ready (function () {}) ;, it initializes your audio object when loading the DOM before loading the contents of the page.