www.webdeveloper.com
Results 1 to 2 of 2

Thread: HTML5 Javascript API for audio

Hybrid View

  1. #1
    Join Date
    Oct 2010
    Posts
    1

    Unhappy HTML5 Javascript API for audio

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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...
    Last edited by rnd me; 10-13-2010 at 05:50 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles