模拟google电吉他2.1GA发布,可录音&支持键盘。强势更新!!!
前几天看到google为了纪念电吉他大师而作的电吉他应用。今天在论坛里看到有人讨论，就随便做了一个简化版。
?
跟google的电吉他应用有以下几点不同。
1.用古典吉他(我弹得。。。)代替电吉他
2.由于是简化版，只做了一根高音的3弦。（2.0beta2中已部分实现）
3.google发音用的是flash，可以保证不延迟和音质。由于做flash太烦了，用html5的audio代替发音的flash。所以大家不用放到web容器里，直接打开网页也能听到声音。缺点是浏览器对ogg的支持不是很好。(在2.0GA中尽可能做到不延迟)
4.弦的变色就不变了。这里的变色由于是2次曲线，没有难度，不过已经预留了变色接口。在1.2版中已实现
5.细弦的描绘在2次曲线上毫无难度，就不画了，大家改改lineWidth就可以了。（2.0beta2中已实现）
6.关于录制功能。在这个应用上，存在特殊性，由于操作都是自己手动，或者鼠标输入的。只需要记录下操作的顺序，然后回放即可实现。无需flash（2.1GA中已实现）
7.只做了简单的mousemove时的弦判定，并且触发用click代替了mousemove。在1.0版中已实现
简化版的代码在guitar.zip中已废弃。其中Class函数是写的习惯了，其实在这个应用里完全没必要
?
?
Version Up补充说明：Current Version: 2.1GA ?2011/6/17 1:28
1.支持键盘，弦自上而下依次为1-6
2.支持录音，无秒数限制，回放时触弦无效
3.改进触弦判定，使触弦更加精确。
4.进一步改善音阶延迟
?
?
大家体会这个应用的时候记得带上耳机。
理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_2.1GA.zip中提供下载。
?
2.0GA发布有感:
感谢大家4天以来的疯狂点击和激情跟帖，你们的支持是我坚持下去的动力。原本只想做一个简单的demo，所以上来很多地方都简化了。为将来的扩展带来了不便。之所以会留下那么多版本，一来是便于大家比较学习。二来是为了让大家看到一个成熟的应用是如何一步一步炼成的。如果您只想看效果，请直接下载最新版本。GA意为阶段性完成版,beta意为测试版。1.x版主要当时只想做成demo，所以效果很简陋。
?
Version Up补充说明：Current Version: 2.0GA ?2011/6/16 7:30
1.修复音频延迟的问题
2.增加触弦差异判定
3.左边的弦全加上了
4.加上了弦信息配置化管理
?
大家体会这个应用的时候记得带上耳机。
不用flash，不是梦想
有空加上其他的音阶
理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_2.0GA.zip中提供下载。
?
?
Version Up补充说明：Current Version: 2.0(beta3.1) ?2011/6/16 0：33
1.紧急修复触弦范围的问题
2.调整弦长
代码在bezierGuitar_2.0(beta3.1).zip中提供下载。
bezierGuitar_2.0(beta3).zip停止下载
bezierGuitar_2.0(beta2).zip停止下载
?
Version Up补充说明：Current Version: 2.0(beta3) ?2011/6/15 23：54
本次改进：
1.完善了触弦判定，使鼠标在高速移动下，达到完美的触弦效果。并且将这部分的代码减到最小
2.删除了不必要的参数
理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_2.0(beta3).zip中提供下载。
?
Version Up补充说明：Current Version: 2.0(beta2) ?2011/6/15 19：15
趁着快下班了上来改两行代码。。。。
本次改进：
1.增加了一根细弦
2.改善了触弦判定，更加贴近人类的生理规则
?
理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_2.0(beta2).zip中提供下载。
?
Version Up补充说明：Current Version: 2.0(beta1) ?2011/6/14 0:11
今天加班。。没什么时间强化代码。所以还有些遗留问题，啥时候有空再解决吧
本次改进：
1.增加了背景(找不到好的图片，就直接拿google的用了)
2.改进了动画接口，并把setTimeout统一管理，可以模仿多线程
3.多增加了一根弦。虽然audio标签的表现不尽如人意
4.调整了弦的宽度
5.紧急修复了背景出不来的问题
?
理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_2.0(beta1).zip中提供下载。
?
Version Up补充说明：Current Version: 1.2 ?2011/6/13 22:26
1.增加了触弦后，弦的颜色渐变
原则上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9(未测试))
代码在bezierGuitar_1.2.zip中提供下载。
?
?
Version Up补充说明：Current Version: 1.1 ?2011/6/13 18:16
刚才在开会。。。主要改进为
1.修复IE系列下动画不正常的问题(IE8以下浏览器会没有声音，是因为IE8以下浏览器不支持Audio标签，但是动画仍然是可用的。谁测下IE9下会怎么样)
?
啥时候有空再把颜色渐变加上
代码在bezierGuitar_1.1.zip中提供下载
?
Version Up 补充说明：Current Version: 1.0 ?2011/6/13 13:31
看了google的那个之后，做了如下改进
1.将2次曲线升级到了3次曲线，这样线条更流畅
2.将click触发改为mousemove触发，使动画更加贴近拨弦动作
3.删除click触发
4.将click时代遗留下的单向拨弦改为判定鼠标位置的双向拨弦
5.增加了弦的阴影效果
6.理论上支持所有支持canvas的浏览器(Firefox, Chrome, Opera10.5以上，IE9)
代码在bezierGuitar.zip中提供下载
?
?
如果大家希望在以上代码上扩展，需要注意以下问题：
1.Audio应该独立出来，另起一个类单独管理。这里为了简化。。。。(预计将来实现)
2.setTimeout应该独立出来单独管理，记得以前写过一篇文章关于封装setTimeout的。。。（2.0beta1中已实现）
3.Class的写法在这里没有必要，大家如果要扩展，并且存在继承关系的可以保留
4.setTimeout这块应封装成from, to , func, duration的形式，这样在改变动画总时间上具有可扩展性。也就是要封装出一个Tween出来。这里为了简化。。。(&昨天晚上玩到很晚，没精神写。。。。)
?
40 楼 rainsilence 2011-06-16 cpdw 写道没有google拨动琴弦时的手感，精神可嘉