HTML Audio

HTML audio allows you to add sound files to a web page. You can use audio to play music, podcasts, voice recordings, educational lessons, and other sound content directly in a web browser.

HTML provides the <audio> element for embedding audio files. Visitors can listen to the audio without installing additional plugins, making it a convenient feature for modern websites.

What Is the HTML Audio Element?

The HTML <audio> element is used to embed sound content into a web page. It supports common audio formats such as MP3, WAV, and Ogg, depending on browser support.

Here is a basic example:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

The controls attribute displays playback buttons, allowing visitors to play, pause, and adjust the volume.

HTML Audio Syntax

The basic syntax of the <audio> element is:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
</audio>

The important parts are:

• <audio> defines the audio player.
• controls displays the built-in playback controls.
• <source> specifies the audio file and its format.
• src contains the file path or URL.
• type identifies the audio MIME type.

You can learn more about media elements in our HTML Media tutorial.

Adding an Audio File to HTML

To play an audio file, place the file in your project folder and specify its location in the src attribute.

For example, suppose your project contains an index.html file and a music.mp3 file in the same folder.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Audio Example</title>
</head>
<body>

  <h1>Listen to Music</h1>

  <audio controls>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support HTML audio.
  </audio>

</body>
</html>

Save the file as index.html and open it in a browser. If the audio file exists at the specified path and uses a supported format, the audio player will appear.

Supported HTML Audio Formats

HTML audio supports several formats, but browser compatibility can vary.

Format	MIME Type	Description
MP3	audio/mpeg	Widely supported audio format
WAV	audio/wav	Often used for uncompressed audio
Ogg	audio/ogg	Open multimedia format

You can provide multiple sources so the browser can try different formats.

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

The browser tries the sources in order and selects one it can play.

Important HTML Audio Attributes

The <audio> element supports several attributes that control playback behavior.

Attribute	Purpose
controls	Displays audio playback controls
autoplay	Requests automatic playback
loop	Repeats the audio
muted	Starts the audio muted
preload	Provides a hint about loading audio

For example, you can make an audio file repeat using the loop attribute:

<audio controls loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

Autoplay may be blocked by browsers, particularly when audio is enabled. Always give users control over playback.

Best Practices for HTML Audio

Follow these practices when adding audio to your website:

• Use a supported audio format, such as MP3.
• Add the controls attribute so visitors can manage playback.
• Compress audio files to reduce loading time.
• Use meaningful file names and correct file paths.
• Avoid unexpected autoplay with sound.
• Provide a text transcript when the audio contains important spoken information.

For more details, explore our tutorials on HTML Audio Controls and HTML Video.