change source to <audio> html5 element

Question

I'm building a jquery/html5 audio player and I have some problems on changing the source to the audio tag. The method I've implemented works on all browsers except IE9.

Here is a sample of code:

audio = $("<audio>").attr("id", "audioElement")
                        .attr("preload", "auto")
                        .appendTo(player);

function addMp3Source(sourceUrl) {
    audio.empty();
    var newSrc = $("<source>").attr("src", config.tracksURL + sourceUrl).appendTo(audio);
}

On IE9, the source is changing, but when I'm playing the track, it's the old sound that plays. On other browsers works fine.

Any ideeas?

Maybe you need to remove the whole audio element and add a new one with the new source as a workaround. — Bas Slagter
– Bas Slagter, Commented Oct 31, 2011 at 12:29
All you doing in there is emptying the html/children of <audio> you should use .remove() and $('<audio/>'); to create a new element audio, that way u loose trace of the old element, :) — Val
– Val, Commented Oct 31, 2011 at 12:35
so I can't change only the source? I already have some references to that audio tag, and if I remove the tag I lose the references. — gabitzish
– gabitzish, Commented Oct 31, 2011 at 12:53

Mark Pro Campos · Accepted Answer · 2011-10-31 19:11:40Z

1

function addMp3Source(sourceUrl) {
    audio.empty();
    var newSrc = $("<source>").attr("src", config.tracksURL + sourceUrl).appendTo(audio);
    /****************/
    audio[0].pause();
    audio[0].load();//suspends and restores all audio element
    /****************/
}

answered Oct 31, 2011 at 19:11

Mark Pro Campos

3642 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

devdanke Over a year ago

Thanks. This approach worked for jQuery Mobile 1.0.1 in FF 10 and Chrome 16 on Mac OS X 10.7, while several other methods didn't. However, I got the error pause() is not a function. So, I removed audio[0].pause(); and now my revised audio sources play:-)

Collectives™ on Stack Overflow

change source to <audio> html5 element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related