In this article, we will learn how to add controls to audio in HTML5. The HTML <audio> controls attribute is used to specify the control to play audio which 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 audio formats in the audio tag because the browser support for them differs for example, Firefox doesn’t support MP3 without using a plugin.
Syntax:
<audio controls> <source> </audio>
From the above Syntax controls attribute adds audio controls, like play, pause, and volume and the <source> element allows you to specify alternative audio files.
The audio tag supports mainly 5 attributes as given below:
- autoplay : Makes the audio start playing automatically, without waiting for the entire audio file to finish downloading.
- loop : Through the loop, you can play the audio again and again.
- muted : Makes the player muted by default.
-
preload : This can be set to the 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 the browser should not load the file when the page loads.
src: This defines the URL of the music that should be played by the audio tag.
Example 1: Use the src attribute in the below code.
<!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.
<!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: