基于HTML5的音频技术

作者，苏州思必驰信息科技有限公司，mdifar

传统情况下，需要在网页中播放一段音频，通常有两种方案：
1. 基于Flash插件的音频播放器。
2. 基于浏览器插件的音频播放。

使用Flash播放器，一个显而易见的好处是基本上兼容所有的PC浏览器，浏览器上只需要安装Flash插件即可，兼容性问题Adobe公司已经帮我们很好的解决了。而基于浏览器音频插件，不同浏览器都需要特别定制，甚至同一个浏览器的不同版本也需要不同的实现，这在使用上造成了一定的困难。

随着移动设备的发展，基于Flash插件的音频播放器越来越不能满足需要：从Flash插件的性能、安全等方面问题考虑，苹果移动设备也都是不支持Flash的。因此，越来越需要一套规范来使开发者能更方便的在网页中嵌入多媒体技术。

HTML5的产生，为音频的播放提供了一套标准。在这之前，要想在页面中播放一段音频，通常是很麻烦的。比较通用的做法是写一个flash音频播放器，并提供一套接口，以便在各个浏览器中都兼容；或者直接写embed标签，但这就需要相关插件的支持。而现在，我们只需要在HTML页面中嵌入一段audio标签，就能在多款主流浏览器下播放音频了。

下表是截止到2011年7月，各款主流浏览器对音频格式的支持情况。可见，具备OGG+MP3两种格式的音频，就能兼容所有现代浏览器。
 

创新互联公司2013年至今，先为林周等服务建站，林周等地企业，进行企业商务咨询服务。为林周企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

* 注意：为了节省带宽，移动设备并不会自动加载和播放音频，需要用户交互操作。iPhone 和 iPad 仅能同时播放一首音乐，并且不允许动态改变音量。iPad在处理同一页面中的多个音乐时存在一些问题。

我们知道了浏览器支持的音频格式，实际上还有一点也不能忽略，就是响应header的Content-Type。必须为正确的格式设置正确的Content-Type，浏览器的audio标签才能正常加载和播放音频。

基于HTML5技术，buzz库对音频这方面提供了很好的封装，其中最重要的是sound类。

下面列出buzz的sound类方法：load,

播放控制play, pause, togglePlay, isPaused, stop, isEnded, loop, unloop

音量控制 mute, unmute, toggleMute, isMuted, setVolume, getVolume, increaseVolume, decreaseVolume, fadeIn, fadeout, fadeTo, fadeWith

事件绑定 bind, bindOnce, unbind, trigger

设置和获取 setTime, getTime, setPercent, getPercent, getDuration, setSpeed, getSpeed, set, get

时间范围 getPlayed, getBuffered, getSeekable

错误和状态 getErrorCode, getErrorMessage, getStateCode, getStateMessage, getNetworkStateCode, getNetworkStateMessage

buzz的事件：abort, canplay, canplaythrough, dataunavailable, durationchange, emptied, empty, ended, error, loadeddata, loadedmetadata, loadstart, pause, play, playing, progress, ratechange, seeked, seeking, suspend, timeupdate, volumechange, waiting

通过这些方法，我们不难看出，其中的接口设计比较冗余，有很多接口的功能实际上是好几个简单接口的组合。并且buzz库只是对HTML5的音频接口进行了封装，并没有提供一套多浏览器兼容的解决方案。而jQuery的jPlayer就做得不错，基于HTML5技术和Flash技术提供了一套通用的音频和视频解决方案，值得我们借鉴。如果还能加上rtmp协议的支持，那就可以说是完美了。

参考资料：

l W3C: The audio element
http://dev.w3.org/html5/spec/Overview.html#the-audio-element

l Buzz! A Javascript HTML5 Audio library
http://buzz.jaysalvat.com/

l jPlayer
http://jplayer.org/

来源：苏州思必驰信息就有限公司，blog.aispeech.com