| Description | A replacement for the HTML5 audio tag. The amp-audio component is only to be used for direct HTML5 audio file embeds. |
| Availability | Stable |
| Required Script | <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> |
| Examples | amp-audio.html everything.amp.html |
The following lists validation errors specific to the amp-audio tag
(see also amp-audio in the AMP validator specification):
| Validation Error | Description |
|---|---|
| The 'example1' tag is missing or incorrect, but required by 'example2'. | Error thrown when required amp-audio extension .js script tag is missing or incorrect. |
| The tag 'example1' may only appear as a descendant of tag 'example2'. Did you mean 'example3'? | Error thrown if your AMP document uses audio instead of amp-audio. Error message: The tag audio may only appear as a descendant of tag noscript. Did you mean amp-audio? |
| Missing URL for attribute 'example1' in tag 'example2'. | Error thrown when src attribute is missing it's URL. |
| Malformed URL 'example3' for attribute 'example1' in tag 'example2'. | Error thrown when src attribute's URL is invalid. |
| Invalid URL protocol 'example3:' for attribute 'example1' in tag 'example2'. | Error thrown src attribute's URL is http; https protocol required. |
| The implied layout 'example1' is not supported by tag 'example2'. | Error thrown when implied layout is set to RESPONSIVE, FILL, or CONTAINER; these layout types aren't supported. |
| The specified layout 'example1' is not supported by tag 'example2'. | Error thrown when specified layout is set to RESPONSIVE, FILL, or CONTAINER; these layout types aren't supported. |
The amp-audio component loads the audio resource specified by its src attribute at a time determined by the runtime. It can be controlled in much the same way as a standard HTML5 audio tag.
Like all embedded external resources in an AMP file, the audio is "lazily" loaded, only when the amp-audio element is in or near the viewport.
The amp-audio component HTML accepts up to three unique types of HTML nodes as children - source tags, a placeholder for before the audio starts, and a fallback if the browser doesn’t support HTML5 audio.
source tag children can be used in the same way as the standard audio tag, to specify different source files to play.
One or zero immediate child nodes can have the placeholder attribute. If present, this node and its children form a placeholder that will display instead of the audio. A click or tap anywhere inside of the amp-audio container will replace the placeholder with the audio itself.
One or zero immediate child nodes can have the fallback attribute. If present, this node and its children form the content that will be displayed if HTML5 audio is not supported on the user’s browser.
For example:
<amp-audio width=400 height=300 src="https://yourhost.com/audios/myaudio.mp3">
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type="audio/mpeg" src="foo.mp3">
<source type="audio/ogg" src="foo.ogg">
</amp-audio>autoplay
The autoplay attribute allows the author to specify when - if ever - the animated image will autoplay.
The presence of the attribute alone implies that the animated image will always autoplay. The author may specify values to limit when the animations will autoplay. Allowable values are desktop, tablet, or mobile, with multiple values separated by a space. The runtime makes a best-guess approximation to the device type to apply this value.
loop
If present, will automatically loop the audio back to the start upon reaching the end.
muted
If present, will mute the audio by default.