3

For HTML5 Audio, let's say you have a list of two songs you want to play. Currently I have it set up so that when the current song stops playing, it loads the new song and plays it. I want to have it so that it loads the next song while the current song is finishing, maybe 20 seconds before the current song finishes. I tried to change the src attribute for the audio object while the song is playing, but that just immediately stops playback for the current song. Is there some other method that allows me to preload the next song while the current song is playing?

skaffman
  • 398,947
  • 96
  • 818
  • 769
George
  • 571
  • 1
  • 8
  • 17

2 Answers2

3

You could use jQuery to create a jQuery object:

var nextSong = document.createElement('audio'); //Creates <audio></audio>
nextSong = $(nextSong); //Converts it to a jQuery object
$(nextSong).attr('autoplay') = false; //You don't want this dynamically loaded audio to start playing automatically
$(nextSong).attr('preload') = "auto"; //Make sure it starts loading the file
$(nextSong).attr('src') = url_to_src; //Loads the src

This should start load the song into an element in the browser's memory and when the song is over, call something like:

$(audio).replace(nextSong);

This isn't tested. You probably don't even need jQuery.

This may work without jQuery:

var nextSong = document.createElement('audio');
nextSong.autoplay = 'false';
nextSong.preload = 'auto';
nextSong.src = url_to_src;

Give it a whirl and let me know!

Daniel
  • 872
  • 1
  • 11
  • 20
  • How to know when the song is over $(audio).bind('onended',switchSong); – Daniel Nov 09 '10 at 21:24
  • These assume that var audio is the audio element. – Daniel Nov 09 '10 at 21:25
  • I should have added that I do not want to use jQuery for this. But, if I'm understanding you correctly, all I have to do is set up a secondary audio element, and replace the current one with that one. One more question: any event listeners that I attached to the current audio object, would those be erased if I replaced it with the updated audio object? – George Nov 09 '10 at 21:25
  • I believe they would; you would have to rebind event listeners each time. In jQuery there is a .live() function that binds an event to an object even when it gets replaced. – Daniel Nov 09 '10 at 21:34
  • Alright. I'll wait to see if anyone posts a more acceptable answer, but looks like this might have to do. Also, don't want to use jQuery... – George Nov 09 '10 at 21:45
  • There's really little or no point in using jQuery, in my opinion; just create the element and set `onended` on the first audio element to swap them (show and play second and delete first). If you're using the controls, transferring things like volume might also be desirable. – Chris Morgan Nov 09 '10 at 22:23
  • Agreed. You really don't need it. I've been using jQuery all day so it was what came to mind first. :-) – Daniel Nov 09 '10 at 22:31
1

This might be off the mark, but have you tried calling the element's load() method?

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#loading-the-media-resource

Edit:

Ah, I think I misunderstood the problem. You want to play two songs back to back in the same media element? I'm not sure how feasible that is... it might be easier to place each song in its own Audio element. You could always dynamically generate these, if you're worried about flexibility.

Matt Diamond
  • 11,646
  • 5
  • 29
  • 36