了解HTML5在移动版Safari方面的局限性

通过本文您将了解在移动版 Safari 中使用 audio sprite 的好处,并尝试使用几个独到的解决方案来绕过 iOS 中的 HTML5 局限。

过去几年,开发人员一直都在制造完善的交互体验,努力使其可以在浏览器中正确运行。这样的站点通常需要使用浏览器插件 (Flash)。随着智能手机和平板电脑的推出,交互体验看似与新的小部件能够完美匹配。但是,由于移动设备的处理能力有限,浏览器插件不再是一种可行的开发平台。

HTML5 已经添加了大量无需额外插件的使用的工具。W3C 的 HTML5 规范仍在开发之中,但是在规范开发过程中,浏览器已经开始提供支持。

HTML5 音频是一个巨大的进步,它允许在浏览器中嵌入声音,尤其是在移动设备中,比如 iOS 的移动版 Safari 浏览器上。尽管 HTML5 音频是一个新特性,但已提供了 iOS 支持。根据流行的移动应用程序 Instapaper 的开发人员报导,2011 年 11 月,其 iOS 用户中有 98.8% 都在使用 iOS 4 或更高版本。由于 HTML5 音频是在 iOS 3 中引入到移动版 Safari 中的,所以您可以放心,iOS 平台为 HTML5 音频提供了广泛的支持。

在文本中,您将了解 HTML5 在桌面上和移动版 Safari 内的局限性,并尝试采用一些解决方案来创建交互的声音效果。本文涵盖的其他内容包括:不受支持的事件、audio sprite 以及如何使用 directCanvas 和 multiSound 加速 HTML5 游戏性能。

有一点非常值得关注:对于 iOS 6,Apple 已经添加了对 Web Audio API(讨论如下)的支持,因此不再需要使用本文中所讨论的许多变通方法。不过,iOS 6 刚刚面世不到几周时间,所以 iOS 5 仍然是市场的主流。本文中所讨论的问题以及所提供的变通方式仍有效,应该在为移动版 Safari 开发声频时考虑使用它们。

HTML5 音频的局限性

在讨论移动版 Safari 中的局限性之前,有必要理解 HTML 音频在桌面上的局限性。HTML5 音频虽然很健壮,但有其局限性,这主要取决于它的实现。对于音乐播放器(点唱机播放器)或简单的声音效果,它很有效,但是对于声音密集的应用程序如游戏,它的表现不是很理想。

格式支持

不幸的是,并不是所有浏览器都支持相同的视频文件格式。如表 1 所示,目前有四种主要格式:MP3、OGG、WAV 和 AAC。

表 1. HTML5 视频格式支持

Ogg Vorbis WAV PCM AAC Internet Explorer 9     X X Firefox X X     Chrome/Safari/移动版 Safari   X X X

为了涵盖所有浏览器,最好是让所有的视频流都具有 Ogg Vorbis 和 AAC 两种格式。

为什么没有包括 MP3?MP3 在进行商业传播时需要支付繁重的版税。MP3 的授权要求对于所有超过 $100K 的数据收取 2% 的传播费。出于这个原因,我更倾向于使用 AAC 而非 MP3。AAC 也并非完全免版税的,但它对于免费传播的许可没有那么严格。AAC 还提供了更好的压缩,文件可以更小,它是 Web 领域的福音。

Ogg Vorbis 之所以压倒性地获得了我的喜爱是因为它是开源的、无专利费并且免版税的。不过,只有 Firefox 支持它。

清单 1 显示了跨浏览器兼容 HTML 标记。

清单 1. 音频元素的 HTML 标记

<audio> // AAC file (Chrome/Safari/IE9) <source src="sound.m4a" type="audio/mpeg" /> // Ogg Vorbis (Firefox) <source src="sound.ogg" type="audio/ogg" /></audio>

处理和效果

在处理音频时,一个强大的特性是处理声音的能力。无论动态合成声音、处理声音效果、应用环境效果,还是进行基本的立体声平移,HTML5 音频缺乏所有这些处理能力。您加载的视频就是将要播放的视频。

Web Audio API (Chrome) 和 Audio Data API (Firefox) 无需任何浏览器插件即可进行合成和动态处理音频的能力帮助您解决了特性缺失的问题。这两种 API 均在开发当中,仅在 Chrome 14+ 和 Firefox 4+ 中受支持。不幸的是,在实现方面这二者差异很大。目前有一些表现不错的库可用来使支持正规化,比如 audiolibjs。Chrome 的 Web Audio API 就是通过 W3C 推广的标准。

单音频层(多音的)

要重复播放声音本身,必须实例化此声音的一个单独的音频对象。在标记和能够播放的音频之间存在 1:1 的对应。对于当前状态的 HTML5 音频,是无法分层的。其他平台,比如 Flash,可以分出一个单独的音频对象,无需创建一个新的音频对象。

时间: 2024-09-18 01:34:18

了解HTML5在移动版Safari方面的局限性的相关文章

safari-移动版Safari不能自动播放mp3怎么办?

问题描述 移动版Safari不能自动播放mp3怎么办? 有个功能HTML5页面需要播放mp3用的是audio标签 现在JS直接播放在Android手机下都可以 如下 //播放指引音频 var audio = document.getElementById("directionAudioPathId"); audio.play(); 但在美版,港版下Safari必须触发事件才可以播放 如下 触发touchstart document.addEventListener('touchstar

微软:移动IE9性能超越iPhone版Safari

据国外媒体报道,一直以来,苹果因为其iPhone版的Safari移动浏览器饱受外界的赞扬,不过微软认为,该公司即将发布的Windows Phone 7版移动IE9的性能要远超iPhone版Safari浏览器. 在2011年移动世界大会(Mobile World Congress)中,微软首席执行官史蒂夫鲍尔默进行了主题演讲.期间,微软公司副总裁Joe Belfiore对外展示了IE9移动版的浏览器. 据了解,Belfiore是通过知名的鱼缸实验去展示移动版IE9的硬件加速功能的,运行环境是一个未

mac版safari浏览记录怎么删除?

  mac版safari浏览记录怎么删除?         有时候我们在使用浏览器浏览网页后不想留下痕迹该怎么办呢?其实很简单,可以在浏览器上设置删除.下面mac版safari浏览记录删除教程,一起来看看吧! mac版safari浏览记录怎么删除? 1.以小时为周期删除浏览痕迹 2.删除当天的浏览痕迹 3.删除当天和昨天的浏览痕迹 4.删除所有浏览记录和相关数据 1.在Safari的menubar里选择"Clear History and Website Data" 2.在Clear

苹果新动向 开发3D版Safari浏览器

近日,据国外媒体报道,根据苹果新递交的专利申请显示,它正在开发3D版Safari浏览器,这一新动向也吸引了苹果用户和业内的广泛关注. 专利申请详细介绍了3D版本的Safari,它允许用户以3D形式将书签.电子邮件.文档和应用分组.专利申请还称,这项发明与"桌面图形用户界面与桌面图形用户界面上的打开窗口的展示和管理"有关. 这项新技术使得用户可以将不同的打开窗口放在同一个组中,以可浏览堆栈的方式展示.这些堆栈将出现在3D桌面环境下.专利摘要中写道:"在2D桌面环境显示的打开窗口

iOS 8版Safari可利用摄像头扫描录入信用卡号

摘要: 很多时候大家网购都需要录入自己的信用卡信息,长长的数字在移动设备上录入是件麻烦事.因此,苹果在iOS 8版的Safari浏览器中推出了一项新功能来,该功能可让用户利用设备的摄像 很多时候大家网购都需要录入自己的信用卡信息,长长的数字在移动设备上录入是件麻烦事.因此,苹果在iOS 8版的Safari浏览器中推出了一项新功能来,该功能可让用户利用设备的摄像头来扫描信用卡,然后自动识别其中的数字并录入相应信息,从而避免了人工录入的麻烦. 此前苹果也提供了其他形式的便利录入手段,比方说用户可以在

苹果专利透露正在开发3D版Safari浏览器

http://www.aliyun.com/zixun/aggregation/17197.html">北京时间5月28日消息,据国外媒体报道,根据苹果新 递交的专利申请显示,它正在开发3D版Safari浏览器. 专利申请详细介绍了3D版本的Safari,它允许用户以3D形式将书签.电子邮件.文档和应用分组.专利申请还称,这项发明与"桌面图形用户界面与桌面图形用户界面上的打开窗口的展示和管理"有关. 这项新技术使得用户可以将不同的打开窗口放在同一个组中,以可浏览堆栈的方

Windows版Safari浏览器现一处严重零日缺陷

5月13日消息,据国外媒体报道称,丹麦IT安全公司Secunia和美国计算机应急响应小组在Windows版苹果Safari浏览器中发现一处严重的零日缺陷. 该缺陷会导致计算机受到远程攻击. 美国计算机应急响应小组高管威尔·多尔曼在该机构网站上表示,利用该缺陷的攻击代码已经被公开发布到互联网上,"我们已经证实Windows版Safari 4.0.5会受到攻击,其他版本也可能受到影响". 多尔曼称,尽管苹果尚未发布补丁软件修正该缺陷,但用户只需禁用JavaScript代码功能,就不会受到攻

基于HTML5的网页版沙丘 II游戏

网页版基于HTML5的沙丘 II游戏由俄罗斯开发者Aleksander Guryanov基于HTML5以及JavaScript开发,关于游戏的情节依然沿用1992年版的沙丘 II,让玩家享受经典的即时战略(RTS)游戏.但唯一不同的是,游戏玩家不需要再下载游戏客户端,而是只需要在浏览器中打开网页.同时开发者Aleksander Guryanov努力将其打造为一个完全开放源码的版本,以寻求该网页游戏的开放性. 沙丘 II这款游戏根据1965年Frank Herbert的小说以及1984年David

新浪微博推出HTML5手机体验版(图)

11月3日消息,新浪微博日前推出手机H5体验版,此版是基于HTML5标准而生.H5体验版的微博页面精简清晰,支持PC扩展体验,支持位置功能,新增私信 对话模式等.新浪微博HTML5体验版的正式上线,意味着手机用户可得到与PC几乎相同的微博体验.10月28日, 新浪推出m.weibo.cn域名,手机用户登录该域名能体验HTML5 标准的网页版微博.相较于wap2.0版本, 采用HTML5编码的手机体验版,布局简化.操作方便,支持地理位置信息功能,可随时查看身边的微博用户和微博信息,支持微博转发到私