title: How can I add multiple sources to an HTML5 audio tag, programmatically?
body: <p>A lot of examples demonstrate multiple source tags nested in the audio tag, as a method to overcome codec compatibility across different browsers. Something like this -</p>
  
  <pre><code>&lt;audio controls="controls"&gt;
    &lt;source src="song.ogg" type="audio/ogg" /&gt;
    &lt;source src="song.mp3" type="audio/mpeg" /&gt;
    Your browser does not support the audio element.
  &lt;/audio&gt;
  </code></pre>
  
  <p>While with JavaScript, I'm also allowed to create an audio element like this -</p>
  
  <pre><code>var new_audio = document.createElement("audio");
  </code></pre>
  
  <p>Where I can set its source by the <code>.src</code> property - <code>new_audio.src="....";</code></p>
  
  <p>I failed to find how to add multiple sources in an audio element through JavaScript, something similar to source tags shown in the HTML snippet.</p>
  
  <p>Do I manipulate the <code>new_audio</code> and add the <code>&lt;source...</code> tags inside it, just like one would manipulate any other DOM element? I'm doing this right now and it works, which is -</p>
  
  <pre><code>new_audio.innerHTML = "&lt;source src='audio/song.ogg' type='audio/ogg' /&gt;";
  new_audio.play();
  </code></pre>
  
  <p>I wonder if there is a more appropriate way to do it?</p>