记乐队在 HTML5 in China 大会上的首演

本文摘自 勾三股四 更早时期的 不老歌 博客。

wa band (wa = web app) 的表演
已经
结束了
哇咔咔

---------- 温习一下梨花体 ----------

呵呵,就知道你们很挑剔的
现场去了超过600人,高朋满座
想要通过我们并不熟悉的音乐领域,在一个月当中的零碎时间里,准备一个小节目,能包容这么多的人的,包括为德高望重的李开复博士的致辞预热——事实上李开复博士全场只会看到我们一个节目——因为我们是开场表演,表演之后,李开复博士将致辞,致辞结束之后他就先撤了。。。
这些都是我准备节目的第一天起就知道或预想到的事情
田爱娜着实给我出了个不小的难题

HTML5技术尝试

HTMl5和音乐有什么交集,当然了Audio标签了。通过在HTML文件内创建Audio标签,然后控制它的播放,就可以让浏览器输出美妙的音乐。

我顺手写了个audio,然后写好src,再play()。
成功了!

这当然不够,我们希望让每一种乐器的每一个音符,都可以随着我们的操作,在浏览器上自由的跳动。组合出一段音乐来。

集合

立刻约了堂主一起来商量,在一个周五晚上,三里屯找了个咖啡馆,2个小时的讨论,程序的雏形大概有个模样了:
→ 监控键盘输入 → 通过keyCode匹配一个src → 然后生成audio标签 → 播放 → 播放结束后把audio删除

稳定性接受考验

在HTML5的世界里,理想和现实的差距往往就是透过浏览器才发现的。尽管我们尝试了认为对HTML5支持较为得力的Webkit内核,要想让一个页面连续播放上百上千个Audio还能面不改色心不跳,也是有很大难度的。我们发现Audio播放完毕之后,内存并没有我们预想中的那样被释放掉,而会不断累计,直至页面崩溃。。。各种神马方法都试过了,内存就是释放不掉。当天我和堂主虽然做出了原型来,但是一想到还有这个大问题要解决,就让人很沮丧。。。

Webkit显灵!

又过了几天,“神奇”的事情出现了。最新的Webkit版本悄悄的对Audio播放的内存滞留问题做了个小改进:当内存涨到一定程度的时候,集中释放一次内存,然后等待第二次内存峰值的到来。
哎,虽然这个垃圾回收机制有点扯,但总是不会让程序崩溃了,稳定性,能得到些保证了。将就一下吧

头脑风暴,勾勒方案

经过了一段时间的技术尝试,我和堂主觉得可以找更多的人来一起商量节目的设计了,于是我们找田爱娜搬来了几位援兵:主要是朱尧和Sammy(朱尧?主要?傻傻分不清楚。。。),两位都是有技术背景同时很懂音乐的人!另外我在傲游的同事战歌,听说我在准备这次节目,也表示了非常浓厚的兴趣,我把他也拉了进来。

“车库咖啡”排排坐

这家咖啡店成了我们接下来的常据点。我们把大家都请了来,智刚那天也在,我们一起就现在的技术原型和节目编排展开了热烈的讨论。每个人都提供了很多优秀的灵感。

电脑、平板、移动设备,一个都不能少

为了展现HTML5世界的广度,我们希望尽可能运用所有可以支持HTML5的设备。并分布跟他们不同的乐器,演奏方式要尽量和传统乐器的演奏方式接近或吻合。
恩,那我们需要设备哦。田爱娜很爽快的答应了我们的需求,这样硬件没有大问题了。

用Node.JS贯穿一切

Node.JS可以和Web Socket很好的配合,通过它们之间的配合,我们可以把所有的乐器和音频输出、视频输出都贯穿在一起。

音乐的部分

技术讨论得差不多了,如何从音乐的角度去编排一个有质感的节目变成了核心问题。其实我们并不在行,要么太技术了没有表演效果,要么效果想象得太夸张了技术难度和风险太大:
比如做出类似劲乐团方式的界面来操作和演奏;
比如开放现场的嘉宾用自己手中的wifi设备接入演奏;
比如找一把真正的吉他或钢琴,和HTML5版的乐器斗琴;
比如加入一些传统的乐器,比如木琴。。。

索性最后大家费了半天劲,达成了一个有共识的方案,也选定了几个曲子。OK,那就这么着了。我们当下就做了分工,然后分头准备各自的部分。开发主要由我和战歌来负责,音乐的部分由Sammy做总设计。

融入更多的灵感

在准备这套方案的过程中,我们又不断发现并攻克了一些技术问题,从用户体验上改进了演奏的方式以尽可能保证演出效果,同时也冒出了一些节目编排上的灵感,找到了一些更合适的曲目。

傲游小聚

期间,我、战歌和Sammy在我们公司小聚了一次,就几个核心问题做了当面沟通。这一次的沟通非常高效而且确定了很多细节,包括:
一、选定了经典乐曲《卡农》和一首流行歌曲,林俊杰的《杀手》。选择这两首的原因都很简单:1.乐谱相对简单,我们的乐手和乐器都能够驾驭演奏;2.大家耳熟能详,有一些共鸣。
二、我们明确了软硬件的具体需求:两架钢琴、一个鼓、一个沙筒(其实曲谱的原版是吊叉)、一个幻灯演示。这样的话,需要三台笔记本、一个平板、一部职能智能手机(后来简化成了iPod Touch)。软件的话,就是一个HTML5的幻灯演示页面、一个钢琴的演奏界面、一个鼓的演奏界面和一个沙筒的演奏界面。钢琴是通过笔记本键盘演奏的,鼓是通过触摸演奏的,沙筒是通过体感演奏的。
三、我们确定了人员安排:两架钢琴由朱尧和Sammy控制,堂主打鼓,战歌控制沙筒,我演示幻灯片,主唱嘛,当时没定下来,我暂时交给战歌准备了,他声音很不错的。

搬援兵v2

再次跟田爱娜报备了我们的准备情况,这次我们又得到了小组的第二次支援:亚波为我们提供了路由器和平板电脑,另外请来了赵义龙做主唱(推荐里有写东北林俊杰哦)。嘿嘿,义龙一开始很没自信,怕唱不好,我和朱尧给他做了不少思想工作滴说。
后来我们又遇到了汤海泉,作为配唱,他的加入让整个演唱的声音更为丰富。但我觉得海泉只做配唱,“戏份”太少了,会有点奇怪,这时战歌很慷慨的把沙筒的表演工作让了出来,这样海泉可以同时完成配唱和沙筒的演奏。而战歌呢,我安排他来演示幻灯片好了,毕竟他参与了很多开发工作,幻灯演示应该轻车熟路的。这样我也可以从幻灯演示中跳出来,专注在表演的整体把控上。这样整个团队终于成型了!Let's Go!

开发和彩排

开发的工作并不轻松,问题依然围绕着程序的性能和稳定性。我和战歌做了大量的实验。

遇到不少小问题

我和战歌发现通过Web Socket传输控制信号到另一台设备上播放音乐会有较为明显的延时。这样的话,只有节奏感较强的乐器才能够通过Web Socket进行演奏并保证效果。

另外一台设备同时播放太多的Audio会一定概率的出现吞音、音乐卡住甚至浏览器崩溃的状况。我们尽量让不同的乐器通过不同的电脑或网页进行播放,来稀释资源占用过多造成的问题。
我们还发现谷歌浏览器一个很诡异的问题,同时打开两个标签页,和把两个标签页分成两个窗口进行运行,播放Audio的效率是不一样的,两个窗口的情况效率更高。

最后我们双管齐下,一方面尽量尝试更多的技术方案,选择一个最优解;另一方面跟田爱娜申请了两台比较高配的小黑。搞到最后,技术质量终于有保证了。

PPT制作

PPT是我自己独立完成的,这里融入了一些我自己的灵感和创意,包括手稿风格的乐器、设备、框线图等等,都是我自己用绘图软件一点一点勾勒出来的。记得我画路由器的时候,构思了好几个手稿图,结果画出来感觉都不理想,最后换成了wifi热点的图标模板,感觉辨识度还不错,终于达到自己满意的效果了,才长舒一口气。

我在PPT里做了大量的CSS3动画,根据表演的编排,和大家的进入时间,融入了乐器介绍、设备介绍、曲目介绍,还加入了一些HTML5技术的介绍。其中代表每个乐器的图案是可以在演奏的时候随着节奏抖动的。
还做蛮久的,不过做完之后很有成就感。

彩排的那点儿事儿

大家又在车库咖啡见面了,再次见面,大家都比过去更有信心了,我们的排练总体上还是比较顺利的,不过每次想到我们将会在李开复博士已经500位HTML5追随者面前表演,还是会给大家提出一些较高的要求。

延时!延时!

移动设备的延时现象,在实际演奏中,比我和战歌想象的更加明显,由其是堂主的鼓,作为整个乐队表演的基础,是不能有半点马虎的,那几天我们的程序把堂主折磨得够呛,因为堂主必须有操作的提前量,还得始终保证统一的节奏。我自己也觉得很头痛,心想这种效果应该是会被500人轰下去的那种效果吧,特别没底。最后,我给堂主减了压,把程序做得傻瓜了一些,只要第一个节奏对,后面的节奏就能得到保证。说实话,我其实是通过程序逃避了延时的问题。这件事情到现在我都深感内疚,作为技术负责人,没有真正搞定这个问题。下次再有类似的技术需求的时候,希望我可以找到更好的方案。

节奏!节奏!

前几次排练的时候,大家有点各自为战的感觉,有人节奏快,有人节奏慢,总体感觉很不协调。这种问题我们旁观者听起来听得很明显,也觉得掌握起来很简单,其实不然。我也想了不少办法尽量避免这一问题的出现,比如让大家都以鼓为标准,万一发现节奏乱了,就听鼓的声音重新找到节奏继续进行下去;比如通过调节不同乐器和演唱者的音量,让大家都可以听到自己和鼓的声音,比如故意将钢琴弹错,考验主唱能不能找到鼓的节奏继续唱等等。
节奏感对于一个团队来讲,是需要很好的默契和长期的磨合的,到排练的最后一天,我们终于做到了,我当时觉得很欣慰。

表演当天踩点儿

表演将于下午1点半开始,我们早上8点半就到了,开始准备各种设备、线路、灯光、音响、舞台、投影,还联系了两个聚光灯和一个喷干冰的东东(哇,当时觉得这个活动好有范儿~)。。。
时间过得真快,一转眼12点了,朱尧把灯光交代好了,设备也调好了,幻灯片接上了,试音也完毕,人员到齐,干冰随时听我指挥。。。
1点了,人来得差不多了,会场上座率居然达到了120%!嘉宾媒体各就各位。主持人跟我做了个简短的交流,我介绍了我们的大概表演过程,和希望他如何帮我们做好铺陈,他也问了我几个关键问题,感觉他很专业的说。不少前端的同行也来了,冲我热情的打招呼,其实我当时脑袋里一片空白啊有木有,都忘记自己怎么回礼的了。。。

开复老师驾到,表演马上就要开始了!

开复老师1点半准时莅临大会现场,粉丝们都上前索要签名,现场一阵小小骚动,我又趁这个机会检查了一下所有的设备是否间接正常,演员是否到齐,注意事项又给大家交代了一遍。恩,万事俱备,只欠东风!

主持人把气氛炒热了
Sammy和朱尧上台了,举了个躬,坐下来(掌声。。。)。卡农开始
卡农结束,堂主、海泉和义龙也上去了,第二首歌杀手马上开始
杀手结束,主持人把我介绍上台,介绍技术实现要点
完了

主持人又把开复老师请上台致辞
开复老师致辞之后
撤了。。。

其实我比台上的任何一个人都紧张。。。以至于这时候我才慌神回来
坏了!我忘记指挥干冰了。。。
坏了!幻灯片里每个乐器图案的抖动效果没出来,线路出了问题。。。

随后收到了一些好朋友和同行的道贺,恩,我也觉得总体上达到预期效果了,不过自己的两个失误还是让我很悔恨。
另外,600人不那么好伺候的,我们的表演档次恐怕有点配不上今天这么高规格的档次,我总觉得有点没做好。
同样的,我希望将来有机会的话,可以做得更好一些。

傲游3.1浏览器的表现

在这次节目的准备过程中,我毛遂自荐,推荐我们公司的傲游浏览器进行幻灯演示,以表现一下我们对HTML5的支持,尤其是傲游3.1浏览器在CSS3和Web Socket方面的表现。傲游3和谷歌苹果的浏览器一样,同属Webkit开源内核阵营,同时还针对国内的网站特色,提供了IE兼容模式。希望可以通过这次大会的表演,让更多人了解傲游已经不再是做“IE外壳”的浏览器了,并且尊重标准,拥抱标准,为开源的标准内核做一点自己的贡献,为标准的推广做一点自己的贡献。演示当天的傲游3.1浏览器表现非常完美,除了配合曲目表演的幻灯演示之外,在接下来的技术实现要点讲解的环节,也很好的实现了transform/transition/web font/text-shadow等特效。
当然其它浏览器在这次表演中的表现也不错,谷歌的亮点在于Audio播放非常稳定,苹果的亮点则在于多点触摸和体感事件的捕获。三家浏览器共同诠释了Webkit的强大!

感恩,致谢

话说回来,除了我觉得自己出现了两个失误之外,我的团队当天都表现的非常完美!非常感谢他们每一个人的全程付出!
战歌,和我长期一起配合完成技术实现,兢兢业业,和他在傲游的工作一样完美!
堂主,同样提供了很多中肯的技术建议!鼓的部分万无一失。
义龙和海泉,为整个乐队画龙点睛!演唱和演奏的最好结合!
Sammy,他的钢琴很棒!在演奏的过程中适度的加入了一些额外的音乐元素,让整个表演赋予了生命力!
朱尧,低音钢琴,配合堂主,很好的控制了整个表演的节奏!表演当天帮我做了很多份外的事情!
亚波和智刚,嘿嘿,二位也帮了我们大忙,亚波提供了很棒的设备支持,智刚则帮我们出谋划策,丰富了我们的创作灵感!
口光兄,你最给力了!傲游的幕后英雄!我笔记本上的贴纸就是出自口光之巧手!
终于轮到田爱娜了,乐队的发起人,而且总是在团队陷入困境的时候伸出援手。非常感谢!!
最后,HTML5研究小组和傲游浏览器,真正促成我完成这件事情的源动力!今后我会继续为HTML5研究小组和傲游而努力奋斗!!

向本文提出修改或勘误建议