Hiding controls in HTML5 audio

Ok, this is a weird one. Consider the following:

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]--> 

It does everything I want it to (autoplay audio in IE, FF, Chrome and Safari) but there's one teeny issue: In Internet Explorer 8 and below there are two "mute sound" buttons. (If you look through the code it should 开发者_StackOverflow社区be obvious as to why.)

My question is: Is it possible to stop this from happening?

Update: Better solution below.

You can use a <script> tag at the bottom of the page, and add the ID "normal_browser_control" to your first audio mute control.

Mute control:

<a href="#" id="normal_browser_control" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>

JS with code from MSDN:

<script><!--
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

var ie_ver = getInternetExplorerVersion();

if(ie_ver > 0 && ie_ver < 9) document.getElementById('normal_browser_control').style.display = 'none';
//--></script>

:)

Or even easier...

You could use two different tags:

    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 

    <![if (!IE)|(gte IE 9)]>
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>
    <![endif]>

    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]--> 

More here: http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx