Embedding Audio Files in HTML

In HTML, we can embed audio and video content directly into the web pages using the <audio> and <video> tags, respectively. Let's discuss embedding audio first:

Embedding Audio

The <audio> tag embeds audio content into an HTML document. It allows you to play audio files directly within the browser.

Audio Attributes

• controls: Adds standard audio controls, such as play, pause, and volume adjustment, to the player;

• autoplay: Specifies whether the audio should start playing automatically when the page loads;

• loop: Specifies whether the audio should loop continuously.

Example:

html
Code kopiëren
Collapse
9
1
2
3
<audio controls autoplay loop>
  <!-- Some other tags -->
</audio>

You may have noticed that we have only specified the characteristics of the audio player, but we have not mentioned where the audio is coming from. We need the <source> tag.

Source

The <source> tag is used inside the <audio> tag to specify the URL of the audio file and its attributes. We can use the src attribute to specify the URL of the audio file and the type attribute to specify the MIME type of the audio file.
Example:

html
Code kopiëren
Collapse
9
1
2
3
4
5
<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

In the example above:

• The <audio> tag includes attributes such as controls, autoplay, and loop;

• The <source> tags specify the source URLs of the audio files and their MIME types;

• If the browser does not support the <audio> tag or the specified audio formats, the alternative text Your browser does not support the audio element. is displayed.

Video Tutorial