RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-audio/ below:

HTML Audio - GeeksforGeeks

HTML Audio

Last Updated : 23 Jul, 2025

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.

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4