Audio controls 属性

为音频启动控件：:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
</head>
<body>

  <audio id="myAudio" controls>
    <source src="/examples/horse.ogg" type="audio/ogg">
    <source src="/examples/horse.mp3" type="audio/mpeg">
     您的浏览器不支持 audio 元素。
</audio><br>
  <button onclick="enableControls()" type="button">启用 controls</button>
  <button onclick="disableControls()" type="button">禁用 controls</button>
  <button onclick="checkControls()" type="button">检测 controls 状态</button>
  <script>
    var x = document.getElementById("myAudio");

    function enableControls() {
      x.controls = true;
      x.load();
    }

    function disableControls() {
      x.controls = false;
      x.load();
    }

    function checkControls() {
      alert(x.controls);
    }
  </script>

</body>
</html>

尝试一下 »

定义和用法

controls 属性设置或返回浏览器应当显示标准的音视频控件。

该属性反映了 <audio > 控件属性。

如果属性存在，它指定音频控件的显示方式。

音视频控件包括：

播放
暂停
进度条
音量

注意： <audio> 元素是HTML5新增加的。

浏览器支持

所有主流浏览器都支持 controls 属性。

注意： Internet Explorer 8 或更早的浏览器不支持 <audio> 属性。

语法

返回 controls 属性：

audioObject.controls

设置 controls 属性：

audioObject.controls = true | false

属性值

值	描述
true\|false	指定音频是否显示控件。 true - 指定显示控件。 false - 默认。指定不显示控件。

技术细节

返回值：	布尔值，如果音频设置显示控件返回 true ，否则返回 false。
默认值:	false

更多实例

查看音频控件是否显示：

<audio id="myAudio" controls>
  <source src="/examples/horse.ogg" type="audio/ogg">
  <source src="/examples/horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<p>点击按钮查看音视频控件是否显示。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
  function myFunction() {
    var x = document.getElementById("myAudio").controls;
    document.getElementById("demo").innerHTML = x;
  }
</script>

尝试一下 »

HTML 参考手册: HTML <audio> controls 属性

Audio 对象