: The Embed Audio element – HTML: HyperText Markup Language

You are watching: audio in swppr.org

<audio>: The Embed Audio element

The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.

The above example shows simple usage of the <audio> element. In a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser’s default audio controls, etc.

The content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don’t support the element.

This element’s attributes include the global attributes.

autoplay
A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.

Note: Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

controls
If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
crossorigin
This enumerated attribute indicates whether to use CORS to fetch the related audio file. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

anonymous
Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the image will be tainted, and its usage restricted.
use-credentials
Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.

When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

disableremoteplayback
A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See this proposed specification for more information.

Note: In Safari, you can use x-webkit-airplay="deny" as a fallback.

loop
A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.
muted
A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is false.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • none: Indicates that the audio should not be preloaded.
  • metadata: Indicates that only audio metadata (e.g. length) is fetched.
  • auto: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.
  • empty string: A synonym of the auto value.

The default value is different for each browser. The spec advises it to be set to metadata.

  • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the audio for playback.
  • The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.
src
The URL of the audio to embed. This is subject to HTTP access controls. This is optional; you may instead use the <source> element within the audio block to specify the audio to embed.

Event name
Fired when

audioprocess
The input buffer of a ScriptProcessorNode is ready to be processed.

canplay
The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

canplaythrough
The browser estimates it can play the media up to its end without stopping for content buffering.

complete
The rendering of an OfflineAudioContext is terminated.

durationchange
The duration attribute has been updated.

emptied
The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the HTMLMediaElement.load method is called to reload it.

ended
Playback has stopped because the end of the media was reached.

loadeddata
The first frame of the media has finished loading.

loadedmetadata
The metadata has been loaded.

pause
Playback has been paused.

play
Playback has begun.

playing
Playback is ready to start after having been paused or delayed due to lack of data.

ratechange
The playback rate has changed.

seeked
A seek operation completed.

seeking
A seek operation began.

stalled
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.

suspend
Media data loading has been suspended.

timeupdate
The time indicated by the currentTime attribute has been updated.

volumechange
The volume has changed.

waiting
Playback has stopped because of a temporary lack of data

The <audio> element has no intrinsic visual output of its own unless the controls attribute is specified, in which case the browser’s default controls are shown.

The default controls have a display value of inline by default, and it is often a good idea set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar.

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can’t however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you’ll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.

Video player styling basics provides some useful styling techniques — it is written in the context of <video>, but much of it is equally applicable to <audio>.

You can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events. However, these events aren’t sent directly to the <audio> element itself. Instead, they’re sent to the track list object within the <audio> element’s HTMLMediaElement that corresponds to the type of track that was added to the element:

HTMLMediaElement.audioTracks
An AudioTrackList containing all of the media element’s audio tracks. You can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
HTMLMediaElement.videoTracks
Add an addtrack listener to this VideoTrackList object to be informed when video tracks are added to the element.
HTMLMediaElement.textTracks
Add an addtrack event listener to this TextTrackList to be notified when new text tracks are added to the element.

Note: Even though it’s an <audio> element, it still has video and text track lists, and can in fact be used to present video, although the use interface implications can be odd.

For example, to detect when audio tracks are added to or removed from an <audio> element, you can use code like this:

var

elem

=

document

.

querySelector

(

"audio"

)

;

elem

.

audioTrackList

.

onaddtrack

=

function

(

event

)

{

trackEditor

.

addTrack

(

event

.

track

)

;

}

;

elem

.

audioTrackList

.

onremovetrack

=

function

(

event

)

{

trackEditor

.

removeTrack

(

event

.

track

)

;

}

;

This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor’s list of available tracks.

You can also use addEventListener() to listen for the addtrack and removetrack events.

The following example shows simple usage of the <audio> element to play an OGG file. It will autoplay due to the autoplay attribute—if the page has permission to do so—and also includes fallback content.

 

<

audio

src

=

"

AudioTest.ogg

"

autoplay

>

Your browser does not support the

<

code

>

audio

</

code

>

element.

</

audio

>

For details on when autoplay works, how to get permission to use autoplay, and how and when it’s appropriate to use autoplay, see our autoplay guide.

This example specifies which audio track to embed using the src attribute on a nested <source> element rather than directly on the <audio> element. It is always useful to include the file’s MIME type inside the type attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.

<

audio

controls

>

<

source

src

=

"

foo.wav

"

type

=

"

audio/wav

"

>

Your browser does not support the

<

code

>

audio

</

code

>

element.

</

audio

>

This example includes multiple <source> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:

<

audio

controls

>

<

source

src

=

"

foo.opus

"

type

=

"

audio/ogg; codecs=opus

"

/>

<

source

src

=

"

foo.ogg

"

type

=

"

audio/ogg; codecs=vorbis

"

/>

<

source

src

=

"

foo.mp3

"

type

=

"

audio/mpeg

"

/>

</

audio

>

Content categories
Flow content, phrasing content, embedded content. If it has a controls attribute: interactive content and palpable content.

Permitted content
If the element has a src attribute: zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements.
Else: zero or more <source> elements followed by zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements.

Tag omission
None, both the starting and ending tag are mandatory.

Permitted parents
Any element that accepts embedded content.

Implicit ARIA role
No corresponding role

Permitted ARIA roles
application

DOM interface
HTMLAudioElement

BCD tables only load in the browser

See more articles in category: Psychology
READ:  PSY | Biography, Songs, Albums, & Facts

Leave a Reply

Back to top button