title: Hiding controls in HTML5 audio
body: <p>Ok, this is a weird one. Consider the following:</p>
  
  <pre><code>    &lt;audio id="background_audio" autoplay="autoplay"&gt;
        &lt;source src="static/audio/clip.ogg" type="audio/ogg" /&gt;
        &lt;source src="static/audio/clip.mp3" type="audio/mpeg" /&gt;
      &lt;/audio&gt; 
      &lt;a href="#" onclick="document.getElementById('background_audio').muted = true; return false"&gt;mute sound&lt;/a&gt;
  
      &lt;!--[if lt IE 9]&gt;
      &lt;bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1"&gt;
      &lt;a href="#" onclick="document.all['background_snd'].src=''; return false"&gt;mute sound&lt;/a&gt;
      &lt;![endif]--&gt; 
  </code></pre>
  
  <p>It does everything I want it to (autoplay audio in IE, FF, Chrome and Safari) but there's one teeny issue: <strong>In Internet Explorer 8 and below there are two "mute sound" buttons.</strong> (If you look through the code it should be obvious as to why.)</p>
  
  <p>My question is: <strong>Is it possible to stop this from happening?</strong></p>