Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML | DOM Audio controls Property

Improve Article
Save Article
Like Article
  • Last Updated : 21 Feb, 2022
Improve Article
Save Article
Like Article

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:

  1. Play
  2. Pause
  3. Seeking
  4. Volume

Syntax:

  • Return the control property:
    audioObject.controls
  • Set the control property:
    audioObject.controls = true|false

Property Values:

  1. true|false: It is used to specify whether an audio should have controls displayed, or not.
  2. Return Values: It returns a Boolean that is true if audio controls are displayed, otherwise it returns false. By Default, it is set to false.

Below program illustrates the Audio controls Property:
Example: Enabling controls for audio.




<!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>
        var a = document.getElementById("Test_Audio");
  
        function Enable_Audio() {
            a.controls = true;
            a.load();
        }
  
        function Check_Audio() {
            alert(a.controls);
        }
    </script>
  
</body>
  
</html>


Output:

  • Before clicking the button:
  • After clicking the button:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!