If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Html5 audio preload="none" messes up pause() and currentTime

I'm having a really weird problem pausing and resetting progress of html5 audio.

If I set preload="none", then "pause();" and "currentTime=0;" will not execute, I know this as I've set an alert() after it and the alert() doesn't execute. The moment I delete preload="none", everything works, and the alert() will of course execute.

This is my code. I fade in/out a couple of pages, each pages has an html 5 audio element in the same position (intended), so the user can play that page's music when visiting that page.

When I click a link to another page, I need to stop and reset all three audio elements. Currently since it doesn't stop, the moment I click the play button of the audio element that fades in, I hear two audios playing at the same time. Though interestingly the audio does fade out.

As mentioned, if I delete preload="none", then the alert('audio has been stopped and reset') will fire, and everything works fine.

Does anyone know how I can load the audio only when needed (if I take out preload="none") then my website won't work in Chrome, about 20 music files will all try to load at the same time causing Chrome to hang), but make my script work?

you cannot jump to zero if the audio file is not loaded, just like you can't pause a CD that's not in your boombox.

you can lazy-load them one-at-a-time by keeping the <audio> tag empty, setting preload, and slowly appending <source> elements to the empty tags as the tracks load.
if your server handles partial url requests (via HTTP Range headers), then chrome will not load the entire file before it fires the "loadeddata" event on the <audio> tag.
when that event fires, you can pause and "currentTime=0" the track, and it's a good opportunity to append the next <source> tag to the next <audio> tag.

if your server doesn't handle partial requests, move the files to somewhere that does, since you can play audio on any site from any site just fine.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com

you cannot jump to zero if the audio file is not loaded, just like you can't pause a CD that's not in your boombox.

you can lazy-load them one-at-a-time by keeping the <audio> tag empty, setting preload, and slowly appending <source> elements to the empty tags as the tracks load.
if your server handles partial url requests (via HTTP Range headers), then chrome will not load the entire file before it fires the "loadeddata" event on the <audio> tag.
when that event fires, you can pause and "currentTime=0" the track, and it's a good opportunity to append the next <source> tag to the next <audio> tag.

if your server doesn't handle partial requests, move the files to somewhere that does, since you can play audio on any site from any site just fine.

Can you give me an example of how to append the source file to an empty audio tag?

If I understand correctly, you mean to first have just "<audio loop class="sound">", then when I enter that page, append "<source src="../../site/music/music1.mp3"/>" in between the <audio> tags?

i don't have time to test this, but something like this is what you need:

Code:

//add a source with a pre-set path to an audio tag based upon a number:
function appendSource(num, aud){
var t=document.createElement("source");
t.src="../../site/music/music"+num+".mp3";
aud.appendChild(t);
}
//loop through all audio tags and add an event listener to append sources upon one loading:
$('audio').map(function(index, elm){
elm.addEventListener("loadeddata", function(){
appendSource(index+1, elm);
});
// run the first one immediately:
if(!index){ appendSource(index+1, elm); }
})//end map()

oh, and you need to enable preloading on all your <audio> tags to use this pattern.
it should not crash chrome anymore because none of the <audio> tags load any data until told to do so later, one at a time.

Create, Share, and Debug HTML pages and snippets with a cool new web app I helped create: pagedemos.com