amp-audio
Introduction
AMP replaces the HTML5 audio tag with its own version: amp-audio
. The amp-audio
component can only be used for direct HTML5 audio file embeds.
Setup
Import the amp-audio
component.
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
Basic usage
The amp-audio
component loads the audio resource specified by its src
attribute at a time determined by the runtime. amp-audio
doesn't support a responsive layout by default, but you can achieve the same by combining a fixed
height with width="auto"
.
<amp-audio width="auto" height="50" src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
<div fallback>Your browser doesn’t support HTML5 audio</div>
</amp-audio>
Custom media notification
With the implementation of the MediaSessionAPI on AMP, you can now show rich notifications that describe the playing media through the `artist`, `album`, `artwork` and `title` attributes. Learn more by following [this tutorial](/advanced/rich_media_notifications/).
<amp-audio src="https://storage.googleapis.com/media-session/sintel/snow-fight.mp3" artwork="https://storage.googleapis.com/media-session/sintel/artwork-512.png" title="Snow Fight" album="Jan Morgenstern" artist="Sintel" height="50" width="auto" controls>
<div fallback>Your browser doesn’t support HTML5 audio</div>
</amp-audio>
Disabling controls
Audio controls are added by default and are the same as controlsList attribute of HTML5 video element. For example, you can use them to disable the download button.
<amp-audio width="auto" height="50" src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controlslist="nodownload">
<div fallback>Your browser doesn’t support HTML5 audio</div>
</amp-audio>
If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.
Go to Stack Overflow An unexplained 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.
Edit sample on GitHub-
Written by @sebastianbenz