Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • websites

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

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

Your browser doesn’t support HTML5 audio
<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.

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>Your browser doesn’t support HTML5 audio</div>
</amp-audio>
Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow
Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub