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