How to add controls to an audio in HTML5 ?
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.
<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:
- autoplay : Makes the audio start playing automatically, without waiting for the entire audio file to finish downloading.
- loop : Through loop you can play the audio again and again.
- muted : Makes the player muted by default.
- 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.
src: This defines the url of the music that should be played by the audio tag.
Example 1: Using src attribute in below code.
Example 2: Using autoplay attribute to play audio automatically.