HTML DOM Audio controls Property

The Audio controls property is used for setting or returning whether audio should display standard audio controls or not. The <audio> controls attribute is reflected by this property. The audio controls included in the property are:

Play
Pause
Seeking
Volume

Syntax:

Return the control property:

audioObject.controls

Set the control property:

audioObject.controls = true|false

Property Values:

true|false: It is used to specify whether an audio should have controls displayed, or not.

The below program illustrates the Audio controls Property:

Example: Enabling controls for audio.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Audio controls Property
    </title>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
        Audio controls Property
    </h2>
    <br>
    <audio id="Test_Audio" controls autoplay>
        <source src="sample1.ogg" type="audio/ogg">
        <source src="sample1.mp3" type="audio/mpeg">
    </audio>
    <p>
          To enable controls, double click
        the "Enable Controls" button.
      </p>
    <br>
    <p>
          To check status of controls, double
        click the "Check Status" button.
      </p>
    <br>
    <button ondblclick="Enable_Audio()">
        Enable Controls
    </button>
    <button ondblclick="Check_Audio()">
        Check Status
    </button>
    <p id="test"></p>

    <script>
       let a = document.getElementById("Test_Audio");
        function Enable_Audio() {
            a.controls = true;
            a.load();
        }
        function Check_Audio() {
            alert(a.controls);
        }
    </script>

</body>

</html>

Output:

Supported Browsers: The browser supported by HTML | DOM Audio controls Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Apple Safari

HTML DOM Audio controls Property

Explore