Categories
Web development

HTML audio tag

HTML audio tag

The HTML <audio> element is used to embed sound content in a document (such as music or other audio streams).

The HTML <source> element allows you to specify alternative audio files which the browser may choose from.

Example:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" type="audio/mpeg">
</audio>

</body>
</html>

Output:


Attributes:

autoplay (value- autoplay) – defines that the audio will start playing as soon as it is ready.

Syntax:

<audio autoplay> 

controls (value- controls) – defines that audio controls should be displayed (play/pause button).

Syntax:

<audio controls> 

loop (value- loop) – defines that the audio will start over again (every time it is finished).

Syntax:

<audio loop> 

muted (value- muted) – defines that the audio output should be muted.

Syntax:

<audio muted> 

preload (value- auto/ metadata/ none) – defines if and how the author thinks the audio should be loaded when the page loads.

<audio preload="auto|metadata|none"> 

src (value- URL) – defines the URL of the audio file.

<audio src="URL"> 

Example:

<!DOCTYPE html>
<html>
<body>

<audio src="https://lenadesign.org/wp-content/uploads/2021/07/Wooden-Train-Whistle.mp3" controls>
</audio>

</body>
</html>

Output:


Enjoy coding!

Read also:

HTML iframe tag

HTML video tag

How to embed the YouTube video in HTML?