跳转至

HTML 音频

基本用法

audio 是浏览器原生声音播放器，适合播客、语音说明、音乐和提示音。最可靠的起点是 保留 controls，让用户主动决定何时播放。

<figure>
  <figcaption>访谈：浏览器如何选择媒体源</figcaption>
  <audio controls preload="metadata">
    <source src="interview.opus" type="audio/ogg; codecs=opus">
    <source src="interview.mp3" type="audio/mpeg">
    <p>无法播放音频，请阅读下方文字稿。</p>
  </audio>
</figure>

示例路径只是占位，不依赖真实资源。实际页面应把它们替换为可信文件，并确保回退段落 或相邻链接指向真实文字稿，而不是只显示“浏览器不支持”。

source 与 type

浏览器按顺序评估 source。type 可包括容器和编解码器提示，减少下载不支持文件的 机会；服务端仍需返回正确 Content-Type。格式支持取决于浏览器、操作系统和编码参数， 不能只凭 .mp3、.ogg 等扩展名判断。

如果只有一个资源，也可写 <audio src="episode.mp3" controls>。需要多格式候选时， 使用子级 source 更清晰，不要同时在同一元素混用 src 与多个候选源。

字幕与文字稿

HTML 的 track 主要用于有时间轴画面的媒体；纯音频播放器的字幕轨道支持和呈现并不 一致。音频内容应提供紧邻播放器、无需 JavaScript 即可访问的完整文字稿。

文字稿应标明讲话者、重要音效和必要语气。音乐或环境声无法逐字转录时，提供标题、 作者、用途和对理解页面有帮助的说明。若站点实现同步文本，应仍保留普通文字版本。

preload 与 autoplay

  • preload="none" 适合包含许多音频条目的列表页，可减少初始网络请求。
  • preload="metadata" 通常足以显示时长等信息，是常见的内容页默认值。
  • preload="auto" 允许浏览器预载更多数据，但不是强制要求。
  • 浏览器可因省流、移动网络或资源策略忽略 preload 提示。
  • 带声音的 autoplay 通常被阻止，并可能与读屏或其他音频冲突。

不要把自动播放成功作为业务流程前提。提示音应由明确操作触发，并提供关闭方式； 循环背景音尤其需要可发现的暂停控件和持久化偏好时的隐私说明。

原生与自定义控件

原生 controls 通常已支持键盘、触屏、音量、进度和播放速度。自定义播放器只有在确有 产品需求时才值得实现，并必须暴露可访问名称、当前状态、焦点样式和键盘操作。

不要用只能拖动的 div 模拟进度条，也不要隐藏原生控件后仅留下鼠标悬停按钮。 播放状态变化应可被辅助技术获知，但避免用频繁的实时区域播报每秒进度。

响应式与性能

音频控件可设置 width: 100% 并配合容器 max-width，同时检查浏览器最小可用宽度。 多个播放器不要全部预载。长音频应支持字节范围请求，并设置合理缓存和访问控制。

压缩时在语音清晰度、文件大小和目标设备支持之间取舍。不要把访问令牌放入长期可见的 媒体 URL；受保护资源的授权必须由服务端执行。

检查清单

  • 有可见、可操作的播放与暂停方式。
  • 提供正确 source、type 和服务端 MIME 类型。
  • 提供完整文字稿及加载失败回退。
  • 不依赖自动播放，不突然播放声音。
  • 测试键盘、触屏、低速网络和后台播放行为。

相关页面