Databases
StackOverflow2013
Postsdbo
POProper onload for <audio>
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProper onload for <audio>
    text
    copied!<p>I've been looking around and I'm starting to worry that this isn't possible. <br> Is there any way to make a standard <code>&lt;audio&gt;</code> tag with fallbacks...</p> <pre><code>&lt;audio&gt; &lt;source src='song.ogg' type='audio/ogg'&gt;&lt;/source&gt; &lt;source src='song.mp3' type='audio/mp3'&gt;&lt;/source&gt; &lt;/audio&gt; </code></pre> <p>...have an onload event. I've looked around and all I could find are some hacks that may or may not work (they don't for me on Chrome) and the <code>canplaythrough</code> event. <br> The reason I want this is because I am making a presentation that has lots of audio clips to play at certain points. I don't want the presentation to start until all of the audio is loaded (otherwise things could get out of sync). I want the clips to be loaded 1 at a time so that I can create a sort of loading bar. I really don't want to resort to using Flash sound because this is supposed to demonstrate pure web technologies.<br><br> So basically I've got this one <code>loadAudio</code> function that cycles through the array of audio files to be loaded <code>audioQueue</code>. <code>loadAudio</code> is called once and then it calls itself until all the files are loaded. Problem is I haven't found the correct event to trigger loading the next file.</p> <pre><code>loadAudio = function(index) { mer = audioQueue[index]; var ob = "&lt;audio id='" + mer + "'&gt;&lt;source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'&gt;&lt;/source&gt;&lt;source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'&gt;&lt;/source&gt;&lt;/audio&gt;"; $("#audios").append(ob); $("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded"); if (index + 1 &lt; audioQueue) { loadAudio(index + 1); } }, false); } </code></pre> <p>So. Any chance for a proper audio onload? I'm basically willing to do anything as long as it's still all HTML and Javascript.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload