HTML5 Javascript API for audio

[grooble]

My question is about the HTML5 Javascript API for the <audio> tag.

I have a js file that dynamically generates <audio> elements in response to Ajax calls. The relevant part looks something like this:

      var soundNames = new Array();
      var soundDiv = document.getElementById("sound");
      for(var i=0; i<JSONResponse.length; i++){
        soundNames[i] = getWord(JSONResponse[i][4]) + i;
        var sound = document.createElement("audio");
        sound.setAttribute("src", "sound/" + JSONQuestion[0] + ".mp3");
        sound.setAttribute("preload", "auto");
        sound.setAttribute("id", soundNames[i]);
        soundDiv.appendChild(sound);
      }

I found that despite setting preload to "auto", nothing was preloaded.
I realize this is probably because the call happens after the page is loaded (?)

I went looking for an API call I can use to preload these sounds and found this on a site:

audioElement.addEventListener(“load”, function() {
audioElement.play();
$(“.duration span”).html(audioElement.duration);
$(“.filename span”).html(audioElement.src);
}, true);

It looks the goods but I don't know JQuery. Can someone give me a plain JS version?
More generally, what are the api methods? load()? Why is play() called above.
Also what events can I listen in to to hear when the loading has completed.

Looking forward to your help.

[rnd me]

load() fires when it's loaded, just like your second example code shows.

if you remove the two jQuery-specific lines, you have a functioning standard javascript code that plays the audio automatically when it's fully loaded.

Note that browser compatibility is still a little spotty and inconsistent on a/v tags at this point. Next year everything should be pretty cohesive.

if you want to know the api stuff, inspect the element in the dom tab of firebug, ie9 dev tools, or the web inspector...