switch audio source with jquery and HTML5 audio tag
53,833
Solution 1
Your change function should be like this:
function change(sourceUrl) {
var audio = $("#player");
$("#ogg_src").attr("src", sourceUrl);
/****************/
audio[0].pause();
audio[0].load();//suspends and restores all audio element
//audio[0].play(); changed based on Sprachprofi's comment below
audio[0].oncanplaythrough = audio[0].play();
/****************/
}
The problems were audio.empty() and the audio var. You were attempting to append an emptied audio tag, and didn't write out the audio tag back to the browser.
Solution 2
You might also want to rename the function since 'change' is already a function in the jQuery universe.
Comments
-
Daniel Hunter almost 2 years
I have only found one other solution but it was incomplete so I need help here.
i have the audio set up:
<audio id="player" controls="controls"> <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" /> <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio>
I have a dynamically generated table of links to change the track:
<div id="audio_list"> <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a> </div>
i have this jquery that i have no clue what to do with to change the track
$('.track').click(function(){ load_track = $(this).attr('data-location');//gets me the url of the new track change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred... });
i found this function but i am not using it the right way
function change_track(sourceUrl) { audio.empty(); $("#ogg_src").attr("src", sourceUrl).appendTo(audio); /****************/ audio[0].pause(); audio[0].load();//suspends and restores all audio element /****************/ } audio = $("<audio>").attr("id", "player") .attr("preload", "auto");