JavaScript Forum

**mushget** · 10-13-2010, 05:09 AM

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:

Code:

 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:

Code:

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.