资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

基于HTML5的音频技术-创新互联

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

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

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

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

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

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

创新互联是一家专注于成都网站设计、成都网站制作与策划设计,久治网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:久治等地区。久治做网站价格咨询:028-86922220

基于HTML5的音频技术
* 注意:为了节省带宽,移动设备并不会自动加载和播放音频,需要用户交互操作。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

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享标题:基于HTML5的音频技术-创新互联
分享链接:http://cdkjz.cn/article/dhgcco.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220