HTML5 <audio> 粗考
HTML 5 提供的 <audio> 给了前端相当多的方便，不再需要 js 库和 swf 作为播放器。但是新带来的坑也是坑得我要死要活的。
这是 W3School 提供的一张简表：
| Browser | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
信了你就掉坑了。
HTML5 的 <audio> 有着比看起来的大得多的坑。主要在于各浏览器的实现上有区别，自带的音频解码器各有不同，导致实际支持的格式各有不一。
并且，在宣称支持的格式里，各浏览器也只支持其中一部分编码格式。例如：
Firefox、Chrome 可以正常播放 Microsoft PCM, 16 bit, mono 8000 Hz 的wav，但是无法播放 GSM 6.10, mono 8000 Hz 的wav
以及来自于 这篇文章 的：
Playing MP3 files in Firefox is actually OS/hardware dependent. That’s right, instead of using a built in, true native support, we have to rely on outside variables that we have no control over. Kind of defeats the purpose of that whole no extensions, native support thing that HTML5 is good for. Yes, this is to avoid patent issues (and so Mozilla doesn’t have to pay licensing fees). If you are serving to a lucky person below, here’s the real MP3 support for Firefox:
- Windows 7+ (Firefox 21.0)
- Windows Vista (Firefox 22.0)
- Android (Firefox 20.0)
- Firefox OS (Firefox 15.0)
- OS X 10.7 (Firefox 22.0)
大意是 Firefox 的 MP3 播放支持其实是依赖于系统和硬件的，这样可以免去专利费。相应的，支持列表就变得有点复杂了。
这里有几个测试页， 可以大致用来测试主流浏览器的音频文件支持情况，但是也不完全。就如上文所述，Chrome 对 wav 文件只能说部分支持。
测试页一：http://hpr.dogphilosophy.net/test/
所以在实际测试中，某浏览器播放不了指定音频有两种可能性：
- 音频格式不支持
- 音频编码格式不支持
对于相关的编码格式，大致查了一下，列表如下：
OGG
同样后缀名为 .ogg 的音频文件，可能有以下几种编码格式： Vorbis, speex, OggPCM, FLAC，其中，Vorbis 是被建议的。
WAV
.wav 文件通常被理解为原始采样，未经压缩。但其实并不一定如此。最广泛标准的 .wav 文件是指微软 PCM 编码的音频文件（其实也已经编码过了，毕竟从模拟信号转数字信号无论如何都会有一个采样过程。）PCM 细分又可分为定长（16bit、32bit 等）和浮点两类。另外.wav 还可能是 GSM 编码格式，这种格式广泛使用于通讯网络，但在互联网上并不常用，最有可能的来源是电话录音导入电脑。
MP3
MP3 规范并没有详细规定如何编码，但却有细致的解码定义。也就是说『符合这一类规范的才叫 MP3』。因此，MP3 的格式反而才是最一致的，除了采样率、变长/定长和声道数量外，不存在其它变化。
Opus
Opus 是设计为同时包含音频和视频的编码格式。* 可以取代复杂的编码后封装方案。但实际上普及率很低，支持也不好。
AAC
AAC （Advanced Audio Coding）主要是得到了苹果的支持。但除此以外，在互联网的使用并不广泛。
Mozilla 提供了另一张更为详细的表格：（注意这个表还是只能作为参考）
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.0 | 3.5 (1.9.1) | 9.0 | 10.50 | 3.1 |
| <audio>: PCM in WAVE | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | 3.1 |
| <audio>: Vorbis in WebM | (Yes) | 4.0 (2.0) | Not supported | 10.60 | 3.1 |
| <audio>: Streaming Vorbis in WebM via MSE | ? | 36.0 (36.0) | ? | ? | ? |
| <audio>: Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | Not supported |
| <audio>: MP3 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
| <audio>: MP3 in MP4 | ? | ? | ? | ? | (Yes) |
| <audio>: AAC in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
| <audio>: Opus in Ogg | 27.0 | 15.0 (15.0) | ? | ? | ? |
| <video>: VP8 and Vorbis in WebM | 6.0 | 4.0 (2.0) | 9.0 | 10.60 | 3.1 |
| <video>: VP9 and Opus in WebM | 29.0 | 28.0 (28.0) | ? | (Yes) | ? |
| <video>: Streaming VP9 and Opus/VP8 and Opus in WebM via MSE | ? | 36.0 (36.0) | ? | ? | ? |
| <video>: Theora and Vorbis in Ogg | (Yes) | 3.5 (1.9.1) | Not supported | 10.50 | Not supported |
| <video>: H.264 and MP3 in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | (Yes) |
| <video>: H.264 and AAC in MP4 | (Yes) | (Yes) | 9.0 | (Yes) | 3.1 |
| any other format | Not supported | Not supported | Not supported | Not supported | 3.1 |
所以解决方案大概就是先通过测试确定一两种被绝大部分浏览器支持的音频编码格式，然后服务器后端将音频文件转码为这一到两种适用的音频格式再传递给前端。
看起来最通用的是 MP3？简单地说，是的。但要注意的是不是任意一种 mp3 编码格式都支持，最优化编码的 VBR 支持性就存疑。同时，由于 Firefox 的 MP3 支持是基于系统的，所以假如 Ubuntu 没有安装 ubuntu-restricted-extra 包也可能出现支持性问题。
* 附：
更复杂的是 <video> 标签，由于视频通常是包含声音和图像两部分的，因此实际上视频文件数据是由已经编码的视频数据和已经编码的音频数据，再次进行数据交错编制而成的。因此除 编码格式 外，又衍伸出 封装格式 的概念。深受大家喜爱的 .avi 格式，即 Audio Video Interleave 的简写，就是一种封装格式。当你使用 avi 封装器折开文件后，就会见到一个无声的视频文件和一个无图像的音频文件。至于各自的编码格式又五花八门了。因此对于 <video> 标签的支持更加混乱，几乎必然需要通过服务器转码才能确保在尽可能多的浏览器上前端一致，这也是各视频网站为什么会有大量集群转码处理用户上传的视频的原因。