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>
Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow
Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub