HTML5 <Audio> : stop loading/buffering when clicking on next song

Question

I have a small website where there are about 40 mp3 podcast, that you can listen to using the html5 tag.

Each podcast is about one hour long and 100mb in size.

Here is my question:

Lets say i press PLAY on PODCAST 1, it start playing, and preloading the rest of the podcast to 100%.

Now lets say i want to play PODCAST 2, i press pause on the the first one, and press play on the 2nd one.

How can i stop the 1st podcast's preloading/buffering, so that all the bandwidth can be used to preload/buffer the 2nd podcast?

I looked at jplayer thinking it was doing just that but by looking at the code, when using multiple players on the same page, all it does it "pause" other players, it doesn't "STOP" preloading/buffering.

Any idea how i could do that?

Thanks a lot :)

edit: i already use preload="none"

Answer 1

I had the exact same problem and resolved it by setting the players src attribute to a very short, silent mp3 file before pausing it. eg..

var silent_file = 'http://example.com/silent.mp3';
var blogstream = 'http://example.com/blogstream';
var audioelement = document.getElementById( 'audioplayer' );

function stop(){
    audioelement.src = silent_file;
    audioelement.pause();
}
function play(){
    audioelement.src = blogstream ;
    audioelement.play(); // not necessary if audio element has autoplay
}