关于html5音频如何应用及解决方法?

叙述HTML5音频支持状态糟糕的文章已有很多。事实就是如此,所以我不会在此赘述这一观点。相反,我主要着眼于开发者在特定平台中将会遇到的问题及潜在解决方式。

HTML5 audio from codecanyon.ne

table

   上表总结了网页浏览器当前的市场份额。Internet Explorer依然是主要的桌面浏览器,紧随其后的是Chrome和Firefox。在手机领域中,Safari主导市场,这主要归功于强大的iOS品牌,紧随其后的是Android。因此,我们将照此顺序逐一进行论述。

  给刚着手植入音频内容的开发者的建议:建议在音频层上采用 SoundManager 2。目前,这是最佳Javascript音频库。植入过程非常简单,API非常整洁,能够在BSD Open Source许可下获得。此外,这一工具的过人之处在于,提供免费第三方代码更新和维护。

  Internet Explorer

  IE 8及其以下的版本不支持HTML5画布和音频,所以这又回到:图像部分基于DOM操作,音频部分通过Flash技术。采用SoundManager 2能够让你在于旧版IE浏览器中支持HTML5音频的过程中省下很多麻烦。

  IE 9则完全不同。HTML5画布和音频表现突出。若微软放弃Win XP OS,IE 9的使用率将大幅提高。

  这将是微软的明智之举。

  Chrome

  Chrome 18及更高版本支持HTML5音频和画布。但HTML5音频只有在网页服务器支持部分下载的情况下才能够顺利运作。这一问题的症状有:

  *无法重播音频

  *无法控制重播位置

  *音频播放一次后停止,但“结束”事件没被激活

  解决这一问题最简单的方式是,在网页服务器上启动远程请求。注意,Google App Engine并不支持远程请求,但我们可以通过执行支持远程请求的文件服务程式解决这一问题。

  另一避开这一问题的方法是,避免采用内置循环函数,通过load()函数“倒回”,在此播放音频。这能够解决问题,但会提高网页服务器的负荷。当加载函数在音频实例中被调用时,网页浏览器就从网页服务器上提取音频数据。

  另一选择就是运用Web Audio API。主要缺点是,目前只有Chrome支持Web Audio API,而且只支持版本18或更高版本。它的突出优点是,Web Audio API通过提供音量和摇摄控制及即时过滤,解决HTML5音频的所有缺点。

  Safari

  Safari和Chrome都是基于Webkit的浏览器,二者存在类似的优缺点。和Chrome一样,Safari支持HTML5画布和音频,但Safari不支持Google Web Audio API。

  遗憾的是,Safari也有和Safari类似的缺陷——它和不支持部分下载的网页服务器所提供的音频不同。Safari的症状截然不同:

  *少量/简短音频没有问题

  *冗长音频就无法播放,会发送音频文件格式受损的错误提示

  解决这一问题最简单的方式是,启用网页服务器的部分下载功能。补救方法具体查看Chrome版块。

  Firefox

   Firefox 3.6及更高版本支持HTML5画布和音频。但Firefox 3.6的音频支持存在许多漏洞——简短音频无法播放,中长音频没有问题。如果你寻求更高级的音频支持,Mozilla基金会目前正在执行自己的Web Audio API——Audio Data API。

  iOS移动平台(Safari移动平台)

  Safari Mobile包含桌面浏览器的所有优缺点,此外它还有一个限制条件—–所有HTML5音频必须通过用户互动激活。这一限制条件带来两个主要弊端。

  首先,这一限制条件阻止音频进行预先缓存/预先加载。因此,任何等待音频“canplaythrough”事件,以探测预先加载音频的应用就会陷入挂起状态。其次,激活音频回放事件非常棘手,因为苹果极力抵制非用户激活的音频回放——这一限制条件一度有个变通方案:通过Javascript模拟点击事件,但这一方法自iOS 4.2.x起就不再适用。

  最后,Flash音频回放技巧不适用iOS平台是因为iOS不支持Flash技术。

  iOS只有两个选项——禁止所有音频,继续通过网页浏览器提供应用;或者保留所有音频,通过appMobi、PhoneGap或Appcelerator以原生应用形式发行HTML5应用。关于游戏开发,我建议采用appMobi,因为它有画布加速器功能。

  Android(内置浏览器)

   只要你的OS平台不那么分散。存在许多Android版本使得HTML5音频支持很难有最终定论。关于目前Android OS存在多少变体,不妨查看YUI Theatre的视频“Scaling Mobile with YUI”。在22分处,解说者呈现一个包含目前市场上Android OS版本不完全列表的幻灯片。

  这些是平台的常见音频特点:

  * Android 2.x似乎支持HTML5音频,但它无法播放音频。幸运的是,应用继续顺利运作——所有音频函数调用返回适当结果,加载/缓存事件被合理激活。

  * ICS (Android 4.x)支持HTML5音频,它能够播放音频。但回放只限于一次一个声音,最近播放的音频会代替所有之前的音频回放。

  我没有测试Android 3.x的HTML5音频性能。

  幸运的是,Android支持Flash整合,所以回放Flash音频具有可行性。尽管如此,Flash是个可选谷歌应用,因此并非所有Android 手机都安装了这一应用。遗憾的是,关于手机Flash市场的渗透情况,我没有任何数据。无论如何,这一方法并不推荐,因为Adobe已放弃支持手机 Flash技术,所以在不久的将来,这多半会消失。

  确保提供适当音频支持的最佳方式就是走本地路线,通过appMobi、 PhoneGap或Appcelerator发布HTML5应用。关于游戏开发,我推荐appMobi,因为它计划在Android平台添加加速画布支持 (游戏邦注:这一功能目前处在Beta阶段)。

  总结

  通往HTML5音频之路布满荆棘。我建议采用 SoundManager 2,这能够帮你省下很多麻烦。关于手机平台,情况就不那么明朗。不妨考虑走本地路线,通过asappMobi、PhoneGap或 Appcelerator之类的HTML5原生应用平台以原生应用形式发行HTML5应用。关于游戏开发,目前的最佳HTML5原生应用平台是 appMobi。

时间: 2024-11-08 18:14:28

关于html5音频如何应用及解决方法?的相关文章

HTML5上传视频无法播放以及兼容的解决方法

一.视频无法播放原因分析 1.路径不对 <video width="100%" height="100%" controls="controls">   <source src="images/apply.mp4" type="video/mp4"></source>  </video> 在images前面不加斜杠,使用相对路径,不要使用绝对路径 2.视频格式

HTML5做手机站页面字体显示很小的解决方法

原文:HTML5做手机站页面字体显示很小的解决方法 HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org

html5图片高度自适应解决方法

今天遇到一个HTML5图片高度自适应各个设备问题,网上找到一个解决方法,跟大家分享下. 由于<body>标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> 3.body的background属性去掉,要不然会被遮住. <!DOCTYPE HTML> <html> <head> <meta c

HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" height="300px" preload="metadata"> <source src="video/FF4.ogv" type="video/ogg"> <source src="video

移动端网页开发的一些解决方法【转】

网上看到一片好文,转载保留 高性能 CSS3 动画 尽可能的让动画元素不在文档流中,以减少重排 position: fixed; position: absolute; 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3

克服 iOS HTML5 音频的局限

尽管 HTML5 音频表现出色,但作为一个仍在开发的规范,它仍有很多局限.移动版 Safari 甚至引入了更多的限制.在本文中,您将了解 HTML5 在移动版 Safari 方面的局限性.一些工作示例提供了相应的解决方案和全面的变通方法.通过本文您将了解在移动版 Safari 中使用 audio sprite 的好处,并尝试使用几个独到的解决方案来绕过 iOS 中的 HTML5 局限. 目录[-] 常用的缩略语 HTML5 音频的局限性 格式支持 表 1. HTML5 视频格式支持 清单 1.

ffmpeg windows 雪花声解决方法

替换所有文件里的<math.h>为<mathimf.h>即可. 我用ffmpeg-0.6.3版测试时,好像mathimf.h文件和其他文件有冲突,需要修改源码. 和qdm2.c文件中的 QDM2Complex *complex;声明相冲突,修改为QDM2Complex *complex1:即可. 和g726.c文件中的static int16_t g726_decode(G726Context* c, int I)中的I冲突,修改为I1即可. 修改完变量声明,同时需修改相关代码,改

用bootstrap兼容ie各大浏览器的解决方法

以bootstrap为框架常常会出现不兼容ie各大浏览器的问题,用以下代码基本可以解决,一般在<head></head>加入以下代码后,网页可能还一些比较不美观,再写一点css hack就可以了,如果加入以下代码网页还是特别乱,请检查一下你的css和js的文件顺序,有加载顺序的... <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="st

Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为域名地址(在跨域问题上,域仅仅是通过“ url的首部 ”来识别而不会去尝试判断相同的IP地址对应着两个域或者两个域是否同属同一个IP),之中任意服务端旗下的客户端发起请求其它服务端资源的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 但很多时候我们却又不得不