记乐队在 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.大家耳熟能详，有一些共鸣。
二、我们明确了软硬件的具体需求：两架钢琴、一个鼓、一个沙筒(其实曲谱的原版是吊叉)、一个幻灯演示。这样的话，需要三台笔记本、一个平板、一部
三、我们确定了人员安排：两架钢琴由朱尧和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研究小组和傲游而努力奋斗！！