Skip to main content

音频选择

优先推荐的音频格式​

格式容器/编码器适用场景浏览器支持范围特点
MP3MPEG-1 Audio Layer III通用音乐、音效所有现代浏览器 ✔️高压缩率，兼容性最佳
AACMP4 (.mp4/.m4a)移动端优先、流媒体所有现代浏览器 ✔️音质优于MP3，苹果生态首选
OpusWebM (.webm)实时通信、低延迟Chrome/Firefox/Edge ✔️超低延迟，适合语音和流媒体

最佳实践方案​

1. 多格式备选策略​

html

运行

复制

<audio controls>
  <source src="audio.mp3" type="audio/mpeg"> <!-- 保底兼容 -->
  <source src="audio.opus" type="audio/ogg; codecs=opus"> <!-- 现代浏览器优先 -->
  <source src="audio.aac" type="audio/aac"> <!-- Safari 备用 -->
  <p>您的浏览器不支持音频播放</p>
</audio>

2. 格式选择优先级​

  • 通用场景: MP3 + AAC（覆盖所有设备）
  • 高音质需求: FLAC（无损） + Opus（高效压缩）
  • 开源项目: OGG Vorbis（免专利费）

🌐 浏览器兼容性速查表​

格式ChromeFirefoxSafariEdgeiOSAndroid
MP3✅✅✅✅✅✅
AAC✅✅✅✅✅✅
Opus✅✅❌✅❌✅
OGG✅✅❌✅❌✅
WAV✅✅✅✅✅✅
FLAC✅✅✅✅❌✅

⚠️ 关键注意事项​

  1. Safari 限制:
    • 不支持 OGG 和 Opus
    • FLAC 仅支持 macOS Sierra+ 和 iOS 11+
  2. 旧版浏览器:
    • IE11 仅支持 MP3 和 AAC
  3. 性能优化:
    • 使用 HTTP/2+ 加速多文件加载
    • 优先选择 44.1kHz 采样率（CD音质）

🛠️ 工具推荐​

  1. 格式转换:
    • FFmpeg（命令行万能工具）
    • Audacity（可视化编辑+导出）
  2. 在线检测:
    • Can I Use（实时兼容性查询）
    • MediaInfo（分析音频元数据）

📜 专利与许可​

  • MP3: 2022年专利已过期 ✅
  • AAC: 需支付设备制造商专利费（用户无需关心）
  • Opus/OGG: 完全开源免费 ✅

根据您的项目需求：

  • 若需 最大兼容性 → 选 MP3
  • 若需 平衡音质与体积 → 选 AAC
  • 若针对 Chrome/Firefox 用户 → 优先 Opus（更高效）

建议通过 HTML5 Audio API 动态检测支持格式，示例代码：

const canPlay = (type: string): boolean => {
  const audio = document.createElement('audio');
  return !!audio.canPlayType(type).replace(/no/, '');
};

// 检测 Opus 支持
if (canPlay('audio/ogg; codecs="opus"')) {
  // 加载 .opus 文件
}

格式转换​

mp3​

MP3 (使用最低可用比特率 + 低通滤波)

ffmpeg -i ui.mp3 \
    -c:a libmp3lame -q:a 9 \          # 可变比特率模式（0-9，9=最低质量）
    -cutoff 16000 \                   # 截断高频（默认20kHz → 16kHz）
    -compression_level 2 \            # 加速编码（0=慢，9=快）
    -ac 1 \                           # 单声道输出
    ui_low.mp3
ffmpeg -i ./ui.mp3 -c:a libmp3lame -q:a 9 -cutoff 16000 -compression_level 2 -ac 1 ./ui_low.mp3

m4a​

高效M4A/AAC（使用原生编码器）

ffmpeg -i ui.mp3 \
  -c:a aac -b:a 48k \          # 固定48kbps比特率
  -profile:a aac_low \         # 低复杂度配置
  -cutoff 14000 \              # 限制高频
  -ac 1 \
  ui_low.m4a
ffmpeg -i ./ui.mp3 -c:a aac -b:a 48k -profile:a aac_low -cutoff 14000 -ac 1 ./ui_low.m4a

webm​

WebM/Opus (优化语音压缩)

ffmpeg -i ui.mp3 \
  -c:a libopus \
  -b:a 24k \                           # 24kbps目标比特率
  -vbr constrained \                    # 受约束VBR模式
  -compression_level 10 \              # 最高压缩级别
  -application audio \                 # 通用音频优化
  -frame_duration 40 \                 # 40ms帧提升压缩率
  -ac 1 \
  ui_low.webm
ffmpeg -i ./ui.mp3 -c:a libopus -b:a 24k -vbr constrained -compression_level 10 -application audio -frame_duration 40 -ac 1 ./ui_low.webm