HTML5实例测试我们选择的是一个Web版钢琴应用,主要测试浏览器对HTML5声音、动态效果、用户交互的处理情况。用户可以从下拉列表中选择曲目播放,在播放的同时下方会有像劲乐团等弹奏游戏那样的条形音符向上滚动,也可以用鼠标点击钢琴键盘自己弹奏。
HTML5钢琴实例
需要说明的是,在钢琴实例中测试交互能力时,我们采用的方法是用鼠标先从左到右,再从右到左从钢琴键盘上快速滑过,检查鼠标滑过时琴键动作是否流畅,是否每个音阶都能来得及发出声音。因为如果浏览器处理得不好,就会出现琴键动作的速度赶不上鼠标操作速度,从而出现动作和声音滞后的问题。
为了保证测试结果的公平性,在测试过程中所有浏览器选择的都是第64首曲目。
8款浏览器HTML5实例测试结果:
浏览器名称 | 声音 | 动态效果 | 交互 |
Google Chrome浏览器 | 有 | 流畅 | 流畅 |
IE9浏览器 | 有 | 流畅 | 流畅 |
Firefox浏览器 | 有 | 略卡 | 动作和声音比操作滞后 |
Opera浏览器 | 有 | 卡 | 动作和声音比操作滞后 |
Safari浏览器 | 无法打开页面 | ||
搜狗浏览器 | 无 | 略卡 | 操作流畅,没有声音 |
QQ浏览器 | 无 | 略卡 | 操作流畅,没有声音 |
傲游浏览器 | 有 | 略卡 | 动作和声音比操作稍有滞后 |
经测试,除了Safari一直处于读取状态,无法打开页面之外,其余7款浏览器都可以正常打开,但搜狗和QQ浏览器播放音乐时没有声音。在动态效果方面,Chrome和IE9的音符滚动最流畅,其余6款浏览器都会有不同程度的卡顿现象。而在进行交互时,Chrome、IE9、搜狗和QQ浏览器的操作都很流畅,只可惜搜狗和QQ浏览器没有声音;而Firefox、Opera和傲游浏览器,鼠标滑过琴键时的动作和声音就不够连续。
感兴趣的用户也可以打开HTML5钢琴实例测试一下自己的浏览器。