amp-audio

简介

AMP 使用其自己的版本：amp-audio 替换了 HTML5 音频标签。 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