amp-audio

1.0 0.1

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

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

用法

将 amp-audio 组件与直接的 HTML5 音频文件嵌入一起使用。

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。

预加载

如果存在，则在 html <audio> 标记中设置 preload 属性，该属性指定作者认为是否应在页面加载时加载音频文件。

自动播放

如果存在，则该属性表示音频将在准备就绪后立即开始播放。

循环

如果存在，则音频将在达到结束时自动循环回到开始。

静音

如果存在，则默认情况下将使音频静音。

控件列表

与 HTML5 音频元素的 controlsList 属性相同。仅受某些浏览器支持。有关详细信息，请参阅 https://mdn.org.cn/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>

插图

指向充当音频插图的 PNG/JPG/ICO 图像的 URL。如果不存在，MediaSessionAPI Helper 将使用 schema.org 定义中的 image 字段、og:image 或网站的 favicon。

艺术家

（字符串）表示音频的作者。

专辑

（字符串）表示音频所取自的专辑。

标题

（字符串）通用属性 的一部分，兼作 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 规则。