title: ie10 html5 audio preload
body: <p>I've been working on a musician's site with html5 audio playback.  Everything works fine in Firefox and Chrome, but IE has been giving me issues, and I narrowed it down to the way I'm loading the media.</p>
  
  <p>Part of my strategy to obfuscate the media source is to have an audio tag with no source, then add the source via javascript.</p>
  
  <p>If I manually write the html, IE10 honors the preload="none" attribute, but if I don't include the sources and add them to the DOM via javascript, the preload attribute is ignored.</p>
  
  <p>Example 1 works as intended:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML5 audio test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;
  This is an audio tag with two source tag children of different types.  Preload is set to none.
  &lt;/p&gt;
  
  &lt;audio id="audiotest" preload="none" controls&gt;
    &lt;source src="test.ogg" type="audio/ogg"&gt;
    &lt;source src="test.mp3" type="audio/mpeg"&gt;
  &lt;/audio&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Example 2 loads starts to download the media despite the preload attribute:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;HTML5 audio test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;
  This is just an audio tag with preload none with javascript adding the sources.
  &lt;/p&gt;
  
  &lt;audio id="audiotest" preload="none" controls&gt;
  &lt;/audio&gt;
  
  &lt;script&gt;
  var oggSource = document.createElement('source');
  oggSource.type='audio/ogg';
  oggSource.src='test.ogg';
  
  var mp3Source = document.createElement('source');
  mp3Source.type='audio/mpeg';
  mp3Source.src='test.mp3';
  
  document.getElementById("audiotest").appendChild(oggSource);
  document.getElementById("audiotest").appendChild(mp3Source);
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are the working examples:</p>
  
  <p><a href="http://www.joshblackburn.com/test1.php" rel="nofollow">http://www.joshblackburn.com/test1.php</a>
  <a href="http://www.joshblackburn.com/test2.php" rel="nofollow">http://www.joshblackburn.com/test2.php</a></p>
  
  <p>I was trying to figure out why none of my controls were working in IE.  I figured out that it was downloading every single track and locking things up.  Using the dev panel in IE10, the network trace confirms the issue.</p>
  
  <p>Is this an IE bug?  Do I need to figure out different ways of obfuscating my sources?</p>
  
  <p>The 'real' page is www.joshblackburn.com/new.php?page=albums if anyone is interested.</p>