title: HTML5 setting audio source in javascript not working
body: <p>Due to HTML5 browser formats tricks I have to put fallback audio formats also in audio format.  I want to set the src of source in audio programmatically but it is not working.</p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;audio id="audioPlayer" width="400" height="30" controls="controls"&gt;        
      &lt;source id="oggSource" type="audio/ogg" /&gt;
      &lt;source id="mp3Source" type="audio/mp3" /&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>Then in javascript using jquery I set the source for each of them (I have one audio tag and many mp3 on page and based on some event I want to change the source of audio tag) so I can't specify src directly in audio mainly because I need fallback support and also I need dynamism.</p>
  
  <p>Using jquery I manipulate the src:</p>
  
  <pre><code>$('#oggSource').attr('src', 'OggFormat.ogg');
  $('#mp3Source').attr('src','Mp3Format.mp3');
  </code></pre>
  
  <p>But this however doesn't work. Any idea why?</p>
  
  <p>If I use:</p>
  
  <pre><code>&lt;audio id="audioPlayer" width="400" height="30" controls="controls"&gt;        
      &lt;source id="oggSource" type="audio/ogg" src="OggFormat.ogg" /&gt;
      &lt;source id="mp3Source" type="audio/mp3" src="Mp3Format.mp3"/&gt;
  &lt;/audio&gt;
  </code></pre>
  
  <p>it works but as I need I need to set it in code and not provide statically.</p>