bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/HTML/Graphics, Media, and Browser Features
HTML•Graphics, Media, and Browser Features

HTML Audio

Concept visual

HTML Audio

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

The HTML

<audio> element is used to play an audio file on a web page.

Formula

The HTML < audio > Element

To play an audio file in HTML, use the <audio> element:

Example

<audio controls>

Formula

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

Your browser does not support the audio element. </audio>

Formula

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The

<source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

The text between the

<audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

Formula

HTML < audio > Autoplay

To start an audio file automatically, use the autoplay attribute:

Example

<audio controls autoplay>

Formula

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

Your browser does not support the audio element. </audio>

Note:

Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed. Add muted after autoplay to let your audio file start playing automatically (but muted):

Example

<audio controls autoplay muted>

Formula

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

Your browser does not support the audio element. </audio>

Browser Support

The numbers in the table specify the first browser version that fully supports the <audio> element.

Element

<audio> 4.0 9.0 3.5 4.0 10.5

HTML Audio Formats

There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:

Browser

Mp3 Wav

Ogg

Edge/IE

Yes

YES* YES*

Chrome

Yes Yes

Yes

Firefox

Yes Yes

Yes

Safari

Yes Yes

NO

Opera

Previous

HTML SVG Code Challenge

Next

HTML Web Storage API