HTML Audio

HTML Audio

The <audio> element is used to embed and play audio files directly on a web page.

The <audio> Element

To play sound in HTML, use the <audio> element together with one or more <source> elements.

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

How the Audio Element Works

• The controls attribute adds play, pause, and volume controls
• The browser plays the first supported format listed in <source>
• Fallback text is shown only if the browser does not support audio

Autoplay Audio

The autoplay attribute starts audio playback automatically.

 <audio controls autoplay>   <source src="horse.mp3" type="audio/mpeg"> </audio> 

Most modern browsers block autoplay with sound. Autoplay is allowed when the audio is muted.

 <audio controls autoplay muted>   <source src="horse.mp3" type="audio/mpeg"> </audio> 

Supported Audio Formats

HTML officially supports three audio formats.

• MP3 (audio/mpeg)
• WAV (audio/wav)
• Ogg (audio/ogg)

MP3 is the most widely used and best-supported audio format.

Browser Compatibility

All modern browsers support the <audio> element.

• Chrome, Edge, Firefox, Opera: MP3, WAV, Ogg
• Safari: MP3, WAV (no Ogg support)

Audio Media Types

• audio/mpeg – MP3 files
• audio/wav – WAV files
• audio/ogg – Ogg files

Audio JavaScript API

The HTML DOM provides methods, properties, and events for controlling audio playback.

You can play, pause, control volume, read duration, and respond to playback events using JavaScript.

HTML Audio Tags

• <audio> – defines audio content
• <source> – defines alternative audio files