音频元素在Chrome

消失看看这个例子http://jsfiddle.net/39gdA/音频元素在Chrome

<audio controls> 
    <source src="audio/no-audio.mp3" type="audio/mpeg"> 
    Your browser does not support this audio format. 
</audio> 

audio { 
    background: yellow; 
    width: 200px; 
    height: 100px; 
    display: block; 
    border: solid 1px #000 
}

音频元素显示得很好，但只要您从音频标签“控制”，它就会消失。尽管在Firefox中它按预期工作。有没有办法如何保持音频元素而不显示控件？

来源

2014-04-15 samuelg0rd0n

当spec中的控件属性不存在时，没有明确指示音频标签应该如何显示。所以它可能会依赖于浏览器。当然，对于视频标签，即使没有控件，也可以显示视频帧，但在音频标签的情况下，您只需“声音”即可中继到目的地（读取扬声器，耳机......）。

如果你决定不使用/设置默认浏览器省去控制属性控制（无论是动态或不）你应该提供自己的一套控制。

您可以使用JavaScript和div封装器来实现您想要的音频标签。一个例子如下：

<div id="audioWrapper"> 
    <audio id="myAudio" controls> 
    <source src="your.mp3" type="audio/mpeg" /> 
    Your browser does not support this audio format. 
    </audio> 
</div> 
<div id="showAudio">Show</div> 
<div id="hideAudio">Hide</div> 

<script type="text/javascript"> 
var audio = document.getElementById('myAudio'); 
var showButton = document.getElementById('showAudio'); 
var hideButton = document.getElementById('hideAudio'); 
showButton.addEventListener('click',function(){ 
    audio.style.display="block"; 
}, 
false); 
hideButton.addEventListener('click',function(){ 
    audio.style.display="none"; 
}, 
false); 
</script>

CSS

#audioWrapper { 
background: yellow; 
width: 200px; 
height: 100px; 
display: block; 
border: solid 1px #000; 
} 
audio{ 
width: 100%; 
}

还要记住，有可能是用于浏览器的音频控制最小宽度或高度，以正确显示（使得它不会重叠与你的背景）。

来源

2014-04-15 11:33:12

音频元素在Chrome

回答

相关问题