title: change <audio> src with javascript
body: <p>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. </p>
  
  <p>*UPDATE: Made a few changes and now its claiming that <code>audio.load();</code> is not a function. Can anyone tell me why that is? The Code is updated to reflect the changes. </p>
  
  <p>JavaScript:</p>
  
  <pre><code>function updateSource(){ 
      var audio = document.getElementById('oggSource');
      audio.src = 
          'audio/ogg/' + 
          document.getElementById('song1').getAttribute('data-value');
      audio.load();
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;audio id="audio" controls="controls"&gt;
      &lt;source id="oggSource" src="" type="audio/ogg"&gt;&lt;/source&gt;
      &lt;source id="mp3Source" type="audio/mp3"&gt;&lt;/source&gt;
          Your browser does not support the audio format.
  &lt;/audio&gt;
  
  &lt;ul style="list-style: none"&gt;
      &lt;li&gt;Sunday May 27, 2012
          &lt;ul style="display: none"&gt;
              &lt;li id="song1" data-value="song1.ogg"&gt;
                  &lt;button onclick="updateSource();"&gt;Item1&lt;/button&gt;
              &lt;/li&gt;
              &lt;li&gt;Item2&lt;/li&gt;
              &lt;li&gt;Item3&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><code>Item2</code> and <code>Item3</code> I will want to play a different audio file when they are clicked on.</p>