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

 

评论

19 楼 leerping 2011-06-14  

楼主牛B啊····

18 楼 rainsilence 2011-06-14  

xinyu198736 写道

lz,ie9支持canvas...

我说的不是ie不支持canvas，而是ie8和ie9再代码里需要判断。这个逻辑我是做了，但是没有测试过。

17 楼 xinyu198736 2011-06-14  

lz,ie9支持canvas...

16 楼 蓝色飞扬 2011-06-14  

我下下来看看效果，代码还没时间看唉，听不错的啊

15 楼 mahonet 2011-06-14  

太nb了。。。。。。

14 楼 181054867 2011-06-14  

支持，多搞些这样的应用出来让大家学习学习

13 楼 EnterLee 2011-06-14  

牛人啊 ，佩服  佩服

12 楼 openFox 2011-06-14  

支持楼主，有时候就应该动真格的，证明楼主具有真材实料，不是光说不练，呵呵

11 楼 blue_halo 2011-06-14  

牛人啊，佩服。。。

10 楼 lbfhappy 2011-06-14  

不知道是不是大家都不懂还是大家都懂了，没有给精华或者良好？

9 楼 keer2345 2011-06-14  

楼主，你别太当真了，呵呵

8 楼 rainsilence 2011-06-13  

下载人不少，看帖的人也不少，怎么没什么人回帖，也没人评贴？？

7 楼 rainsilence 2011-06-13  

mmtye 写道

IE9无法运行

呵呵。。。那应该是因为ie9不需要excanvas

6 楼 mmtye 2011-06-13  

IE9无法运行

5 楼 rainsilence 2011-06-13  

xsz 写道

技术+精神 赞

4 楼 xsz 2011-06-13  

技术+精神 赞

3 楼 rainsilence 2011-06-13  

2 楼 JavaStudyEye 2011-06-13  

不会吧真来啦

1 楼 vincent_com 2011-06-12  

支持楼主  ！