/    Sign up×
Reference /Pin to ProfileBookmark

The audio tag, or Embed Audio element, embeds sound content into the document, using one or more src attributes to define the audio source file. The browser will choose the first source that it supports.

Syntax

Using the src attribute in a similar manner as the img tag, the path to the media file to embed is defined. Additional optional attributes can specify such things as automatically playing and looping the media. Any content inside the audio tag is displayed as a fallback for lack of browser support.

<audio controls autoplay src="audiofile.mp3">
  <p>Your browser does not support audio files.</p>
</audio>

Attributes

autoplay
If included, the audio will immediately begin playing as soon as enough of the file is loaded. This is a Boolean value.

controls
When present, the browser renders controls for audio playback, such as volume, pause/resume, etc.

controlslist
When specified, determines what is shown when the controls attribute is present. Allowed values are nodownload, nofullscreen, and noremoteplayback.

loop
When specified, the audio will replay from the beginning every time it finishes.

muted
When specified, the audio output will be muted.

preload
This tells the browser how the audio should be loaded when the page loads. Allowed values are auto, metadata, and none.

Browser Compatibilty

Demos

User-submitted codepen.io examples of <audio>

@ZalorCakeLord

See the Pen on CodePen.

@themolitorNice demo! Should I just be hearing a *beep* sound?
@ZalorCakeLordYup! Didn't want to use anything to large lol.

Want to Contribute?

Submit a codepen.io link that demonstrates <audio>:

to submit a demo.
HTML
×

Success!

Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...