amp-audio

Edit on Github
Open in Playground

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".

Example

Your browser doesn’t support HTML5 audio

<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>
    <p>Your browser doesn’t support HTML5 audio</p>
  </div>
</amp-audio>

Customize Media Notifications


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.

Example

<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>
</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.

Example

Your browser doesn’t support HTML5 audio

  <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>
      <p>Your browser doesn’t support HTML5 audio</p>
    </div>
  </amp-audio>