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>
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub