HTML Audio Tag

The <audio> element was introduced in HTML 5. The <audio> tag in HTML is used to embed sound files directly into a web page. With this tag, you can let users play music, sound effects, voice clips, or any kind of audio without needing to download anything separately.

It works in modern browsers and gives you built-in audio controls like play, pause, and volume, making it easy for users to interact with the audio. The <audio> tag lets you add sound to your webpage in a clean, user-friendly way.

Syntax -

<audio controls>
  <source src="audio-file-path" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

<audio> is the main container.
controls adds built-in buttons like play, pause, and volume.
<source> defines the audio file and its format.

Attribute	Description
autoplay	Specifies the audio can be loading and playing will be done automatically.
controls	Instructs the web browser to apply browsers in-built set of user controls (to stop, play, mute, etc.).
crossorigin	Used to handle Cross Origin Resource Sharing requests in conjunction with JavaScript
loop	Specifies that replay the audio once it has finished.
mediagroup	Used to group several audio and/or video elements together.
muted	Specifies that mute the audio resource by default.
preload	Specifies the size of the audio file should be buffered. none: specifies fetch audio data once playback has been appealed. metadata: Fetch the duration data. auto: User specification comes before server
src	Specifies the location (URL) of the audio file.

Supported Audio File Types -

Different browsers support different formats, so it’s best to provide multiple formats:

File Type	Extension	MIME Type	Supported by
MP3	.mp3	audio/mpeg	Almost all browsers
OGG	.ogg	audio/ogg	Firefox, Chrome
WAV	.wav	audio/wav	Most browsers

Example -

Scenario - Embedding a Podcast

<!DOCTYPE html>
<html>
	<head>
		<title>Audio example</title>
	</head>
	<body>
		<audio src="audio/new.mp3" controls>
			<p> Song new.mp3 not supported by browser </p>
		</audio>
	</body>
</html>

Output -

Visitors can click play and listen right from the page — no extra apps needed.