amp-audio

1.0 0.1

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-audio-0.1.css">

用法

搭配直接 HTML5 音訊檔案嵌入使用 amp-audio 元件。

amp-audio 元件會在執行階段決定的時間載入其 src 屬性指定的音訊資源。其控制方式與標準 HTML5 audio 標記非常相似。如同 AMP 檔案中的所有嵌入式外部資源，音訊會「延遲」載入，僅在 amp-audio 元素位於或接近可視區域時載入

amp-audio 元件最多接受三種獨特的 HTML 節點類型作為子項

• source 標記：就像在 HTML <audio> 標記中一樣，您可以新增 <source> 標記子項，以指定要播放的不同來源媒體檔案。
• 音訊開始前的預留位置：零或一個直接子節點可以具有 placeholder 屬性。如果存在，此節點及其子項會形成一個預留位置，將顯示以取代音訊。在 amp-audio 容器內任何位置點擊或輕觸，都會將預留位置替換為音訊本身。
• 瀏覽器不支援 HTML5 音訊時的回退：零或一個直接子節點可以具有 fallback 屬性。如果存在，此節點及其子項會形成在使用者的瀏覽器上不支援 HTML5 音訊時顯示的內容。

例如

<amp-audio
  width="400"
  height="300"
  src="https://yourhost.com/audios/myaudio.mp3"
>
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio</p>
  </div>
  <source type="audio/mpeg" src="foo.mp3" />
  <source type="audio/ogg" src="foo.ogg" />
</amp-audio>

屬性

src

如果沒有 <source> 子項，則為必要項目。必須為 HTTPS。

preload (預先載入)

如果存在，則在 html <audio> 標記中設定 preload 屬性，該屬性指定作者是否認為應該在頁面載入時載入音訊檔案。

autoplay (自動播放)

如果存在，則此屬性表示音訊會在準備就緒後立即開始播放。

loop (循環播放)

如果存在，音訊會在到達結尾時自動循環回到開始。

muted (靜音)

如果存在，預設會將音訊設為靜音。

controlsList (控制項清單)

與 HTML5 音訊元素的 controlsList 屬性相同。僅某些瀏覽器支援。詳細資訊請參閱 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList。

媒體工作階段屬性

amp-audio 實作 媒體工作階段 API，讓開發人員能夠指定更多關於正在播放的音訊檔案的資訊，以便在使用者裝置的通知中心顯示 (以及播放/暫停控制項)。

範例

<amp-audio
  width="400"
  height="300"
  src="https://yourhost.com/audios/myaudio.mp3"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome music"
  artist="Awesome singer"
  album="Amazing album"
>
  <source type="audio/mpeg" src="foo.mp3" />
</amp-audio>

artwork (封面)

PNG/JPG/ICO 圖片的網址，作為音訊的封面。如果不存在，MediaSessionAPI Helper 將使用 schema.org 定義中的 image 欄位、og:image 或網站的 favicon。

artist (演出者)

(字串) 表示音訊的作者。

album (專輯)

(字串) 表示音訊取自的專輯。

title (標題)

(字串) 通用屬性 的一部分，兼作音訊的名稱顯示在 MediaSession 通知中。如果未提供，MediaSessionAPI Helper 將使用 aria-label 屬性或回退到頁面的標題。

分析

AMP 音訊分析收集關於使用者如何在 AMP 文件中與音訊互動的資料。AMP 音訊擴充功能在其生命週期中發出分析事件。這些事件可以使用 audio-* 觸發器透過分析設定進行報告。目前支援 audio-play 和 audio-pause 這兩個分析事件。

如需關於 amp-analytics 設定的詳細資訊，請參閱 AMP Analytics 元件。

音訊播放觸發器 ("on": "audio-play")

當使用者點擊播放或自動播放開始或繼續時，音訊開始播放時會觸發 audio-play 觸發器。使用這些設定來觸發此事件的請求。

"triggers": {
  "audioPlay": {
    "on": "audio-play",
    "request": "event",
    "selector": "#audio1"
  }
}

音訊暫停觸發器 ("on": "audio-pause")

當使用者點擊暫停、自動播放暫停或音訊到達結尾時，音訊停止播放時會觸發 audio-pause 觸發器。使用這些設定來觸發此事件的請求。

"triggers": {
  "audioPause": {
    "on": "audio-pause",
    "request": "event",
    "selector": "#audio1"
  }
}

驗證

請參閱 AMP 驗證器規格中的 amp-audio 規則。