amp-audio

簡介

AMP 以其自身的版本取代 HTML5 音訊標籤：amp-audio。amp-audio 元件僅能用於直接嵌入 HTML5 音訊檔案。

設定

匯入 amp-audio 元件。

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

基本用法

amp-audio 元件會在執行階段決定的時間點載入其 src 屬性指定的音訊資源。amp-audio 預設不支援回應式版面配置，但您可以結合 fixed 高度和 width="auto" 來達到相同的效果。

您的瀏覽器不支援 HTML5 音訊

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

自訂媒體通知

透過在 AMP 上實作 MediaSessionAPI，您現在可以透過 `artist`、`album`、`artwork` 和 `title` 屬性顯示豐富的通知，以描述播放中的媒體。若要瞭解詳情，請參閱[本教學課程](advanced/rich_media_notifications/)。

您的瀏覽器不支援 HTML5 音訊

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

停用控制項

音訊控制項預設會新增，且與 HTML5 視訊元素的 controlsList 屬性相同。例如，您可以使用它們來停用下載按鈕。

您的瀏覽器不支援 HTML5 音訊

<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 上編輯範例

由 @sebastianbenz 撰寫