在HTML5音頻中隱藏控件

Question

好吧，這是一個奇怪的。考慮以下幾點：

<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]--> 

它的一切，我希望它（在IE，FF，Chrome和Safari自動播放音頻），但有一個極小的問題：在Internet Explorer 8和下面有兩個「靜音」鈕釦。（如果你看看代碼，它應該是明顯的，爲什麼。）

我的問題是：是否有可能阻止這種情況發生？

Answer 1

或者更簡單...

你可以使用兩種不同的標籤：

<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]--> 

這裏更多：http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx

Answer 2

更新：下面更好的解決方案。

您可以在頁面底部使用<script>標籤，並將ID「normal_browser_control」添加到您的第一個音頻靜音控件。

靜音控制：

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

JS的代碼從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> 

:)