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>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub