A replacement for the HTML5
audio tag. The
amp-audio component is only to be used for direct HTML5 audio file embeds.
|Supported Layouts||fixed, fixed-height, nodisplay|
|Examples||Annotated code example for amp-audio|
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
amp-audio component accepts up to three unique types of HTML nodes as children:
sourcetags: Just like in the HTML
<audio>tag, you can add
<source>tag children to specify different source media files to play.
- a placeholder for before the audio starts: One or zero immediate child nodes can have the
placeholderattribute. 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-audiocontainer will replace the placeholder with the audio itself.
- a fallback if the browser doesn’t support HTML5 audio: One or zero immediate child nodes can have the
fallbackattribute. If present, this node and its children form the content that displays if HTML5 audio is not supported on the user’s browser.
<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>
|src||Required if no |
|preload||If present, sets the preload attribute in the html |
|autoplay||If present, the attribute implies that the audio will start playing as soon as it is ready.|
|loop||If present, the audio will automatically loop back to the start upon reaching the end.|
|muted||If present, will mute the audio by default.|
|controlsList||Same as controlsList attribute of HTML5 audio element. Only supported by certain browsers. Please see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList for details.|
Media Session Attributes
amp-audio implements the Media Session API enabling developers to specify more information about the audio file that is playing to be displayed in the notification center of user's devices (along with play/pause controls).
|artwork||URL to a PNG/JPG/ICO image serving as the audio's artwork. If not present, the MediaSessionAPI Helper will use either the `image` field in the `schema.org` definition, the `og:image` or the website's `favicon`.|
|artist||(string) indicates the author of the audio|
|album||(string) indicates the album the audio was taken from|
|title||(string) part of the [common attributes](https://www.ampproject.org/docs/reference/common_attributes), doubles as the audio's name displayed in the MediaSession notification. If not provided, the MediaSessionAPI Helper will use either the `aria-label` attribute or fall back to the page's title.|
<amp-audio width="400" height="300" src="https://yourhost.com/audios/myaudio.mp3" artwork="https://yourhost.com/artworks/artwork.png" title="Awesome music" artist="Awesome singer" album="Amazing album"> <source type="audio/mpeg" src="foo.mp3"> </amp-audio>
See amp-audio rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.Go to Stack OverflowFound a bug or missing a feature?
The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.Go to GitHub