Skip to content
Related Articles

Related Articles

Improve Article

How to add controls to an audio in HTML5 ?

  • Difficulty Level : Easy
  • Last Updated : 24 Mar, 2021
Geek Week

The HTML <audio> controls attribute is used to specify the control to play audio that means it allows embedding an HTML5 music player with audio controls straight into the webpage.

The current HTML5 most commonly used ogg, mp3 and wav as an audio formats in the audio tag because the browser support for them differs like for example, Firefox doesn’t support MP3 without using a plugin.

Syntax:

<audio controls>
 <source>
</audio>

From above Syntax controls attribute adds audio controls, like play, pause, and volume and <source> element allows you to specify alternative audio files.

Audio tag supports mainly 5 attributes as given below:



  1. autoplay : Makes the audio start playing automatically, without waiting for the entire audio file to finish downloading.
  2. loop : Through loop you can play the audio again and again.
  3. muted : Makes the player muted by default.
  4. preload : This can be set to following value.
    • auto : This implies whether the file should load as soon as the page loads.
    • metadata : This implies whether only the metadata, track title etc. should be loaded.
    • none : This implies browser should not load the file when the page loads.
  5. src: This defines the url of the music that should be played by the audio tag.

Example 1: Using src attribute in below code.

HTML




<!DOCTYPE html> 
<html
  
<body style="text-align: center"
  <h1 style="color: green"
    GeeksforGeeks 
  </h1
  
  <h2 style="font-family: Impact"
    HTML Audio controls Attribute 
  </h2
  <br
  
  <audio id="Test_Audio" controls> 
    <source src
      type="audio/ogg"
  
    <source src
      type="audio/mpeg"
        
  </audio
</body
  
</html>

Output:

Example 2: Using autoplay attribute to play audio automatically.

HTML




<!DOCTYPE html> 
<html
  
<body style="text-align: center"
  <h1 style="color: green"
    GeeksforGeeks 
  </h1
  
  <h2 style="font-family: Impact"
    HTML Audio controls Attribute 
  </h2
  <br
  
  <audio id="Test_Audio" controls autoplay > 
    <source src
        type="audio/ogg"
  
    <source src
        type="audio/mpeg"
  </audio
</body
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :