change <audio> src with javascript
Try this snippet
list.onclick = function(e) { e.preventDefault(); var elm = e.target; var audio = document.getElementById('audio'); var source = document.getElementById('audioSource'); source.src = elm.getAttribute('data-value'); audio.load(); //call this to just preload the audio without playing audio.play(); //call this to play the song right away};
<ul style="list-style: none"> <li>Audio Files <ul id="list"> <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li> <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li> <li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li> <li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li> </ul> </li></ul><audio id="audio" controls="controls"> <source id="audioSource" src=""></source> Your browser does not support the audio format.</audio>
JSFiddle http://jsfiddle.net/jm6ky/2/
with jQuery:
$("#playerSource").attr("src", "new_src"); var audio = $("#player"); audio[0].pause(); audio[0].load();//suspends and restores all audio element if (isAutoplay) audio[0].play();