Question

看一下这个例子http://jsfiddle.net/39gdA/

<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中它按预期工作。有没有办法保留音频元素而不显示控件？

Answer 1

当spec中没有控件属性时，没有明确指示音频标签的外观。所以很可能是依赖于浏览器的。当然，使用视频标签，即使没有控制，您也可以显示视频帧，但在音频标签的情况下，您只需要声音＆＃34;声音＆＃34;转发到目的地（读取扬声器，耳机......）。

如果您决定不使用/设置默认浏览器控件而忽略控件属性（无论是否动态），应该提供您自己的一组控件。

您可以使用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%;
}

另请注意，浏览器的音频控件可以有最小的宽度或高度，以便正确显示（以便它不会与您的背景重叠）。

音频元素没有＆＃39;控制＆＃39;在Chrome中消失了

1 个答案: