change <audio> src with javascript change <audio> src with javascript javascript javascript

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>