HTML Audio Tag
Using HTML5, you can use the audio files like MP3, OGG or WAV files without using a flash.
Now, to embed the audio sound, you just need to embed the HTML5 <audio> element which is introduced as part of HTML5. This element comes with controls attribute which adds other audio control features like play button, pause button, time-frame, volume button, download button etc.
You need to set the path of the file using the <source> element and src attribute where the audio file will reside.
<source src=”path_url/file.type” type=”audio/file_type”>
Basic example of HTML Audio Tag
Although, we do not recommend to use the autoplay feature of HTML5 as on fewer occasions, it will annoy the users but you can still use it based on your requirement.
Just code the autoplay attribute along with the controls attribute when you use the <audio> element to automatically play the audio file when the user comes to the web page which embeds the audio file.
HTML5 Audio Auto Loop
Code the loop attribute along with the <audio> element to start the audio sound again and again in a loop.
Example of Audio Auto Loop
HTML5 Audio Controls Style
If you are familiar with CSS(Cascading Style sheets), then it is better to style your audio in your HTML document.
In the example below, we are setting styles like background color, margin, hover effects, box shadow and linear gradients on the <audio> element using CSS.
If you are an absolute beginner and have no idea about CSS, then click on this link to master CSS.
Audio Autoplay Hidden
The property autoplay=”true” enables the audio sound to play automatically & we are not coding any controls attribute, hence the audio is hidden as well.
If the audio sound does not play automatically in your browser, then click on the lock icon which is at the left side of the url window. Click on the dropdown next to “sound” and select “Automatic (default)” or “allow”.
Example of Audio Autoplay Hidden
HTML Audio Volume
Audio Play and Pause Button
In the example below, we are using a single play/pause button. You can change this to create 2 different buttons for play and pause each. You can also use CSS to style it as well.
Example of Audio Play and Pause Button
In the example below, the audio automatically plays when you load the web page and this uses simple play() function.