HTML - <audio> Tag

Audio files can be included on a website by using the HTML <audio> tag. It enables the direct playback of audio files within a web browser without the requirement for extra plugins.

A web page can include sound files by using the inline <audio> tag. Developers can use this tag to add audio files to their webpage, such as songs, music, etc. The audio file should be encoded using certain codes because HTML developers are aware that not all web browsers support all audio formats. They can use the src attribute or the <source> tag to show several ways of interpreting the same audio file. <audio> tags in HTML comes in pair. Using the starting tag, <audio>, and the closing tag, </audio> developers can add content to HTML documents.

Syntax

Following is the syntax for HTML <audio> tag −

<audio>
   <source src=" " type=" ">
</audio>

Specific Attributes

The HTML <audio> tag also supports the following additional attributes −

S.No. Attribute & Description
1

autoplay

This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
2

autobuffer

This Boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play.
3

controls

If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
4

loop

This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
5

preload

This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
6

src

The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

Example

Following is an example where we are going to use the <audio> tag to add a music file to the webpage.

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

When we execute the above code, it will generate an output consisting of the music file displayed on the webpage.

Example

Consider another scenario where we are going to add the autoplay attribute to the <audio> tag.

<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
   <audio controls autoplay>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

On running the above code, the output window will pop up, displaying the audio file uploaded to the webpage, which will start playing automatically on page load as the autoplay attribute was mentioned.

Example

Let’s look at another example where we are going to use the muted attribute to the <audio> tag along with the autoplay.

<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
   <audio controls autoplay muted>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

When we execute the above code, it will generate an output consisting of audio, which was muted initially on the load of the page by using the muted attribute.

Example

In the following example, we are going to use the <audio> tag along with the loop attribute.

<!DOCTYPE html>
<html>
<body style="background-color:#FCF3CF ">
   <audio controls autoplay loop>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

On running the above code, the output window will pop up, displaying the audio file, which is mentioned with a loop attribute that makes the audio file start from the beginning after the audio finishes.

html_tags_reference.htm
Advertisements