title: Manipulaing the HTML5 <audio>/<source> attribute with JQuery
body: <p>Im trying to build a simple audio player with the HTML5 audio tag.  I have 3 <code>&lt;source&gt;</code> elements nested within the main <code>&lt;audio&gt;</code> element, each pointing to an audio track with multiple formats for cross-browser support.  I am using a simple button to trigger a "click" event with the following code:</p>
  
  <pre><code>&lt;audio id="myAudio" preload="none"&gt;
    &lt;source src="audio/demo.m4a" type="audio/m4a" /&gt;
    &lt;source src="audio/demo.mp3" type="audio/mp3" /&gt;
    &lt;source src="audio/demo.ogg" type="audio/ogg" /&gt;
    &lt;!-- other sources go here --&gt;
  &lt;/audio&gt;
  
  var audio = document.getElementById("myAudio");
  
  // Change track!
  $("#mute").on("click", function(evt) {
      $("#myAudio &gt; source:gt(2)").attr({ src: "audio/demo2.ogg" , type: "audio/ogg"});
      if(!audio.paused) {
          audio.pause();
          audio.play();
      }
  });
  </code></pre>
  
  <p>As you may guess, I'm trying to change the third elements <code>src</code> attribute by applying a <code>:gt(2)</code> filter.  Not only am I trying to increment the track, I am also trying to stop the current track from playing so the new track can start playing immediately when the button is pressed.  So far this is not having any effect on my webpage.</p>