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