模拟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出来。这里为了简化。。。(&昨天晚上玩到很晚，没精神写。。。。)

 

评论

59 楼 askjsp 2011-06-27  

真的太强大了，很不错哦

58 楼 zhouxiaowen 2011-06-25  

LZ太给力了。不错，有前途。

57 楼 rainsilence 2011-06-24  

bbhehe 写道

不错，体验了，是否继续完善。

改善空间仍然很大
1.Color的生成这段，代码其实很不理想
2.频率生成这段，也不是很好
3.可以加入和弦
4.发音的源文件还可以再丰富些

56 楼 bbhehe 2011-06-24  

不错，体验了，是否继续完善。

55 楼 lythemaster 2011-06-22  

很好，等有时间学习一下~

54 楼 applepaihs 2011-06-21  

进来学习下。

53 楼 rainsilence 2011-06-20  

ONEBOYS 写道

共用一弦也是可以的么

恩，是的，所以现在正在考虑引入和铉。比如按下c，就变成c和弦。按下f就变成f和弦。但是这样做有很多弊端。因为就算左手是c和弦。还分按弦和不按弦。所以要模拟真的吉他还蛮复杂的。

52 楼 jackra 2011-06-20  

太NB了太NB了太NB了太NB了太NB了太NB了太NB了太NB了太NB了太NB了太NB了

51 楼 jackra 2011-06-20  

Google电吉他引发的轩然大波

50 楼 ONEBOYS 2011-06-20  

共用一弦也是可以的么

49 楼 rainsilence 2011-06-19  

ONEBOYS 写道

不妨加上我那个曲谱识别功能哈。

呵呵，在此之前，要加上低音和中音的1234567。但是对于这张图来说，琴弦太少了。

48 楼 ONEBOYS 2011-06-19  

不妨加上我那个曲谱识别功能哈。

47 楼 rainsilence 2011-06-18  

dingzhaoxu 写道

google的琴弦是可以被鼠标拉的，不过能拉得弧度比较小。

这有何难？
只不过这个应用，除了背景图片和创意，其他的都是我的作品。。我的代码和google的没有一行是一样的。我的代码完全基于面向对象。

46 楼 dingzhaoxu 2011-06-18  

google的琴弦是可以被鼠标拉的，不过能拉得弧度比较小。

45 楼 rainsilence 2011-06-17  

张洪财 写道

ie 8 没声音。 是不是不支持html5的原因

恩。。。ie6-ie8都只能看到弦，看不见影子，也没有声音。这已经是ie的极限了。

44 楼 张洪财 2011-06-17  

ie 8 没声音。 是不是不支持html5的原因

43 楼 rainsilence 2011-06-17  

zhanghh321 写道

额  不错 下下来能用了  虽然跟google的还有些不一样。。

楼主威武啊 能否告知下如何实现的呀  我想模仿你的写一下。。。O(∩_∩)O~

1.线程队列
2.封装Canvas
3.触弦判定
4.html5 audio

好像就这点东西吧。。。

42 楼 zhanghh321 2011-06-17  

额  不错 下下来能用了  虽然跟google的还有些不一样。。

楼主威武啊 能否告知下如何实现的呀  我想模仿你的写一下。。。O(∩_∩)O~

41 楼 rainsilence 2011-06-17  

至此，基本功能已经完全实现。将来着重代码效率，算法和程序结构的完善。

40 楼 rainsilence 2011-06-16  

cpdw 写道

没有google拨动琴弦时的手感，精神可嘉

会有的