change <audio> src with javascript

Question

I have multiple audio files that I want to stream based on the user selects. How do I do that? This is what I have so far and it doesn't seem to work.

*UPDATE: Made a few changes and now its claiming that audio.load(); is not a function. Can anyone tell me why that is? The Code is updated to reflect the changes.

JavaScript:

function updateSource(){      var audio = document.getElementById('oggSource');     audio.src =          'audio/ogg/' +          document.getElementById('song1').getAttribute('data-value');     audio.load(); } 

HTML:

<audio id="audio" controls="controls">     <source id="oggSource" src="" type="audio/ogg"></source>     <source id="mp3Source" type="audio/mp3"></source>         Your browser does not support the audio format. </audio>  <ul style="list-style: none">     <li>Sunday May 27, 2012         <ul style="display: none">             <li id="song1" data-value="song1.ogg">                 <button onclick="updateSource();">Item1</button>             </li>             <li>Item2</li>             <li>Item3</li>         </ul>     </li> </ul> 

Item2 and Item3 I will want to play a different audio file when they are clicked on.

Answer 1

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/

Answer 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();