AMP replaces the HTML5 audio tag with its own version:
amp-audio component can only be used for direct HTML5 audio file embeds.
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
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
<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>
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