跳到主要内容

音频

音频元素​

音频资源采用了 "免专利优先，效率其次，兼容性保底" 的多层次编解码策略：

<audio controls preload="metadata">
  <!-- 免专利格式（优先） -->
  <source src="audio.opus.ogg" type="audio/ogg; codecs=opus">  <!-- Ogg容器Opus -->
  <source src="audio.opus.webm" type="audio/webm; codecs=opus"> <!-- WebM容器Opus -->
  <source src="audio.vorbis.ogg" type="audio/ogg; codecs=vorbis">

  <!-- 无损格式（按需添加） -->
  <source src="audio.flac" type="audio/flac">
  <source src="audio.flac.ogg" type="audio/ogg; codecs=flac">

  <!-- 专利格式（兜底） -->
  <source src="audio.aac.m4a" type="audio/mp4">
  <source src="audio.mp3" type="audio/mpeg">

  <p>您的浏览器不支持HTML5音频，请下载文件或升级浏览器。</p>
</audio>
注意

在实际项目中，可能无法使用所有的编解码器和音频格式。但还是建议按照 "免专利优先，效率其次，兼容性保底" 的原则来选择音频格式和编解码器。这样可以确保在大多数现代浏览器中获得最佳性能和兼容性。

音频格式与编解码器​

在 Web 开发中，音频格式和编解码器的选择对性能、兼容性和用户体验有重大影响。了解音频容器格式和编解码器的区别对于优化音频内容至关重要。

音频容器格式​

音频容器格式是一种文件格式，用于存储音频数据和元数据。常见的容器格式包括：

  1. Ogg：

    • 开源免费的容器格式
    • 可以包含多种音频编解码器，如Opus、Vorbis和FLAC
    • 在Firefox、Chrome等开源浏览器中得到良好支持

  2. WebM：

    • 由Google支持的开源容器格式，主要用于视频，但也支持纯音频
    • 专为网络优化，文件体积小，加载速度快
    • 通常与Opus编解码器配合使用

  3. MP4/M4A：

    • 广泛使用的容器格式
    • 几乎所有设备和平台都支持
    • 通常用于AAC编码音频，也支持其他编解码器

  4. MP3：

    • 既是容器格式又是编解码器
    • 几乎普遍兼容所有设备和浏览器
    • 专利已过期，现在可自由使用

音频编解码器​

音频编解码器负责压缩和解压缩音频数据。不同的编解码器在压缩效率、音质和兼容性方面各有优劣。

现代网页应用中常用的音频编解码器按压缩效率排序：

  1. Opus：

    • 最先进的开源、免专利费的音频编解码器
    • 在低比特率下提供卓越的音质
    • 低延迟，适合实时应用
    • 在Chrome、Firefox、Edge和Safari中得到良好支持
    • 适合语音和音乐内容

  2. AAC (Advanced Audio Coding)：

    • MP3的后继者，提供更好的压缩效率
    • 需要支付专利许可费用（在某些地区）
    • 在所有现代浏览器中得到广泛支持
    • 适合音乐和一般音频内容

  3. Vorbis：

    • 开源、免专利费的音频编解码器
    • 比MP3提供更好的音质
    • 广泛用于开源项目和游戏
    • 常与Ogg容器格式配合使用

  4. MP3 (MPEG-1 Audio Layer III)：

    • 最广泛使用的音频编解码器
    • 专利已于2017年过期
    • 几乎所有设备都支持
    • 压缩效率低于更现代的编解码器

  5. FLAC (Free Lossless Audio Codec)：

    • 开源无损音频编解码器
    • 保留100%的原始音频质量
    • 文件大小比未压缩音频小约40-60%
    • 适合高质量音乐和存档

容器格式与编解码器兼容性表格​

容器格式支持的音频编解码器浏览器兼容性最适用场景
OggOpus, Vorbis, FLACChrome, Firefox, Edge, Opera开源项目，高质量音频
WebMOpus, VorbisChrome, Firefox, Edge, Opera, Safari 16+网络流式传输，低延迟应用
MP4/M4AAAC, MP3, Opus (少数)全部现代浏览器通用音频，最佳兼容性
MP3MP3所有浏览器最广泛兼容，较旧设备
WAVPCM (无压缩)几乎所有浏览器原始音频，录音应用
FLACFLACChrome, Firefox, Edge, Opera高保真音乐，音频存档

编解码器性能与兼容性比较​

编解码器压缩效率音质浏览器支持专利状态最佳比特率
Opus极高极高Chrome, Firefox, Edge, Safari免费开源语音: 16-32kbps 音乐: 64-128kbps
AAC高高所有现代浏览器专利受限128-256kbps
Vorbis高高Chrome, Firefox, Edge, Opera免费开源128-192kbps
MP3中中所有浏览器专利过期128-320kbps
FLAC无损原始音质Chrome, Firefox, Edge, Opera免费开源无损 (约原始大小的50%)
PCM (WAV)无原始音质所有浏览器无专利无压缩 (1411kbps, 16bit/44.1kHz)
提示

可以使用 Can I Use 检查浏览器对不同音频格式和编解码器的支持情况：

音频转码​

使用 FFmpeg 进行音频转码，确保音频在不同浏览器和设备上兼容：

# 生成 Opus（Ogg容器）
ffmpeg -i input.wav -c:a libopus -b:a 128k -vn audio.opus.ogg

# 生成 Opus（WebM容器）
ffmpeg -i input.wav -c:a libopus -b:a 128k -vn audio.opus.webm

# 生成 Vorbis
ffmpeg -i input.wav -c:a libvorbis -q:a 5 -vn audio.vorbis.ogg

# 生成 AAC（MP4容器）
ffmpeg -i input.wav -c:a aac -b:a 192k -vn audio.aac.m4a

# 生成 FLAC无损
ffmpeg -i input.wav -c:a flac -compression_level 8 -vn audio.flac

# 生成 MP3
ffmpeg -i input.wav -c:a libmp3lame -q:a 2 -vn audio.mp3

# 生成 FLAC（Ogg容器）
ffmpeg -i input.wav -c:a flac -compression_level 8 -vn audio.flac.ogg

最佳实践​

音频格式选择策略​

  • 网络应用：优先使用 Opus (64-96kbps)，兼容性考虑提供 AAC 和 MP3
  • 语音内容：Opus 在 16-24kbps 即可提供清晰语音
  • 音乐内容：Opus 128kbps 或 AAC 192kbps
  • 高保真需求：提供 FLAC 无损选择
  • 最大兼容性：始终提供 MP3 格式作为兜底方案

性能优化​

  • 合适的比特率：根据内容类型选择适当的比特率，避免过度压缩或浪费带宽
  • 预加载策略：使用 preload="metadata" 或 preload="none" 减少初始加载时间
  • 音频分段：长音频内容考虑分段加载或使用流式传输
  • 懒加载：页面加载时不立即加载音频，等到用户交互或滚动到可见区域时再加载
  • CDN 分发：利用内容分发网络提高加载速度和可靠性

用户体验​

  • 提供控件：使用 controls 属性让用户控制播放
  • 避免自动播放：遵循现代浏览器的自动播放政策，避免未经用户交互时自动播放有声内容
  • 音量控制：提供明显的音量控制，并记住用户偏好
  • 播放速度控制：为播客、教学内容等提供可调节的播放速度
  • 进度保存：为长音频内容保存播放进度
// 保存音频播放进度
const audioElement = document.querySelector('audio');
audioElement.addEventListener('timeupdate', () => {
  localStorage.setItem('audioProgress', audioElement.currentTime);
});

// 恢复播放进度
window.addEventListener('DOMContentLoaded', () => {
  const savedProgress = localStorage.getItem('audioProgress');
  if (savedProgress !== null) {
    audioElement.currentTime = parseFloat(savedProgress);
  }
});

无障碍性考虑​

文本替代和转录​

  • 文本转录：为所有音频内容提供完整的文本转录

    <figure>
      <audio controls src="interview.opus.ogg">
        您的浏览器不支持音频元素
      </audio>
      <figcaption>
        <a href="interview-transcript.html">查看访谈完整文字记录</a>
      </figcaption>
    </figure>

  • 描述性标题和上下文：确保音频内容附近有描述性文本，解释音频内容

键盘可访问性​

  • 确保所有音频控件可以通过键盘访问和操作
  • 实现自定义控件时，使用正确的 ARIA 角色和属性

屏幕阅读器支持​

  • 为音频播放器添加适当的 ARIA 属性： 
    <div role="region" aria-label="音频播放器">
      <audio id="podcast" src="episode.opus.ogg" aria-describedby="podcast-desc"></audio>
      <p id="podcast-desc">第45集：人工智能在现代医疗中的应用</p>
      <button aria-controls="podcast">播放/暂停</button>
    </div>

音频描述和考量​

  • 避免仅依靠声音传达重要信息
  • 为有听力障碍的用户提供字幕或文本替代
  • 在有背景音乐的情况下，确保语音内容清晰可辨

视觉反馈​

  • 提供音频波形可视化或动态进度指示器
  • 确保音频状态变化有明显的视觉反馈，不仅仅依赖声音
/* 为音频控件提供明显的视觉焦点状态 */
audio:focus, 
.custom-audio-player button:focus {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

遵循标准和法规​

  • 遵循 WCAG 2.1 AA 级或更高标准
  • 确保音频内容符合相关无障碍规范:
    • 美国: ADA 和 Section 508
    • 欧盟: EN 301 549
    • 中国: GB/T 29262-2012

音频API与高级功能​

Web Audio API 提供了更高级的音频处理功能，适用于需要音频可视化、效果处理或实时音频应用的场景：

// 简单的音频可视化示例
const audioElement = document.querySelector('audio');
const audioContext = new AudioContext();
const source = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();

// 连接节点
source.connect(analyser);
analyser.connect(audioContext.destination);

// 设置分析器参数
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// 渲染可视化（需配合Canvas使用）
function renderFrame() {
  requestAnimationFrame(renderFrame);
  analyser.getByteFrequencyData(dataArray);
  // 使用dataArray数据绘制可视化效果
}
renderFrame();