change <audio> src with javascript

html, html5-audio, javascript

Solution

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/

Problem

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.

Original source