title: switch audio source with jquery and HTML5 audio tag
body: <p>I have only found one other solution but it was incomplete so I need help here. </p>
  
  <p>i have the audio set up:</p>
  
  <pre><code>&lt;audio id="player" controls="controls"&gt;
            &lt;source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" /&gt;
            &lt;source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" /&gt;
            Your browser does not support the audio element.
      &lt;/audio&gt;
  </code></pre>
  
  <p>I have a dynamically generated table of links to change the track:</p>
  
  <pre><code>&lt;div id="audio_list"&gt;
     &lt;a href="#" class="track" data-location="http://www.newoggtrack.ogg"&gt;sample&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i have this jquery that i have no clue what to do with to change the track</p>
  
  <pre><code>$('.track').click(function(){
  
      load_track = $(this).attr('data-location');//gets me the url of the new track
  
      change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred...
  
  });
  </code></pre>
  
  <p>i found this function but i am not using it the right way</p>
  
  <pre><code> function change_track(sourceUrl) {
  
          audio.empty();
          $("#ogg_src").attr("src", sourceUrl).appendTo(audio);
          /****************/
          audio[0].pause();
          audio[0].load();//suspends and restores all audio element
          /****************/
      }
  
  audio = $("&lt;audio&gt;").attr("id", "player")
                          .attr("preload", "auto");
  </code></pre>