如何隐藏 HTML5 音频控件？

Posted 2023-05-07

【中文标题】如何隐藏 HTML5 音频控件？

【英文标题】：How do you hide HTML5 Audio controls?

【发布时间】：2011-08-07 13:13:20

【问题描述】：

如何隐藏 html5 音频的浏览器特定控件？我正在制作缩略图来代表每个曲目和 javascript 来播放/暂停。

谢谢！

HTML：

<audio class="thumbnail" id="paparazzi" controls="none">
    <source src="song.ogg" type="audio/ogg" />
    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
    Your browser does not support HTML5 audio.
</audio>

【参考方案1】：

controls 属性是一个布尔属性。这意味着如果指定，则 controls 为 true，如果未指定，则 controls 为 false。

就有效性而言，如果您希望控件为真，您可以通过以下方式指定它：

<audio controls>
<audio controls="controls">
<audio controls="">

【讨论】：

这完全没有改变

<audio controls> 删除 controls 也会隐藏音频元素

【参考方案2】：

根本不指定 controls 属性，这应该会阻止它显示（我在 5 秒谷歌后得到了这个，不要引用我的话）。

HTML5 video - show/hide controls programmatically

【参考方案3】：

 var audio = document.getElementById('audioFile');
    audio.controls = false;



    <audio  id="audioFile"   controls>
              <source src="xyz.mp3" type="audio/mpeg">
              </audio>