HTML Audio

Last Updated : 26 Dec, 2024

The HTML <audio> element is used to add audio content to a webpage, allowing you to play music, sound effects, or other audio files directly in the browser.

Syntax

<audio>
      <source src="sample.mp3" type="audio/mpeg">
</audio>.

HTML

<!DOCTYPE html>
<html lang="en">

<body>
	<audio>
		<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mp3">
		<source src="" type="audio/ogg">
	</audio>
</body>

</html>

The <audio> supports the global attributes and event attributes.

Functionality of HTML Audio

The controls attribute adds play, pause, and volume controls to the audio player.
The autoplay attribute makes the audio play automatically when the page loads.
The loop attribute makes the audio play continuously, repeating the file.
The src attribute defines the URL of the audio file.
The muted attribute silences the audio when the page loads.

HTML Audio Media Types

The mp3 file format with media type audio/mpeg.
The ogg file format with media type audio/ogg.
The wav file format with media type audio/wav.

More Examples of HTML Audio

Basic Autoplay Audio

HTML

<html lang="en">
<body>
	<audio autoplay>
		<source src="https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3"
                type="audio/mpeg">
	</audio>
</body>
</html>

The <audio> element includes the autoplay attribute, causing the audio to play automatically upon page load.
The <source> element specifies the audio file's URL and its MIME type.

To learn more about the HTML audio autoplay attribute, click here Link

Autoplay Audio with Controls and Styling

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		audio {
			display: block;
			margin: 20px auto;
			width: 80%;
		}
	</style>
</head>
<body>
	<audio controls autoplay>
		<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20241009180552641558/sample-12s.mp3" type="audio/mpeg">
	</audio>
</body>
</html>

The <audio> element includes both controls and autoplay attributes, providing playback controls to the user while starting the audio automatically.
The CSS styles center the audio player on the page and set its width to 80% of the container, enhancing its appearance.

Best Practices for HTML Audio

Provide multiple audio formats to ensure compatibility across different browsers.
Include the controls attribute to offer users playback options like play, pause, and volume control.

HTML Audio- FAQs

How can I loop an audio file in HTML?

Add the loop attribute to the <audio> tag to replay the audio automatically.

Can I set the audio to play automatically when the page loads?

Yes, use the autoplay attribute in the <audio> tag, but be aware that some browsers may block autoplay to enhance user experience.

How do I specify alternative audio files for better browser support?

Use multiple <source> elements within the <audio> tag, each with different audio formats.

Is it possible to customize the appearance of the default audio controls?

The default controls have limited styling options; for full customization, consider creating custom controls with JavaScript and CSS.

How can I make the audio element responsive?

Apply CSS styles to the <audio> element, such as setting its width to 100%, to ensure it adapts to different screen sizes.

HTML Basics

shivanigupta18rk

Improve

Article Tags :

Jan	FEB	Mar
	20
2024	2025	2026

HTML Audio

Syntax

Functionality of HTML Audio

HTML Audio Media Types

Basic Autoplay Audio

Autoplay Audio with Controls and Styling

Best Practices for HTML Audio

HTML Audio- FAQs

How can I loop an audio file in HTML?

Can I set the audio to play automatically when the page loads?

How do I specify alternative audio files for better browser support?

Is it possible to customize the appearance of the default audio controls?

How can I make the audio element responsive?

Similar Reads

What kind of Experience do you want to share?