职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 416|回复: 9

模拟google电吉他2.1GA发布,可录音&支持键盘。强势更新!!!

[复制链接]
已经来了吗 发表于 2011-8-20 09:36 | 显示全部楼层 |阅读模式
前几天看到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出来。这里为了简化。。。(&昨天晚上玩到很晚,没精神写。。。。)

bezierGuitar2.1GA.zip (63.3 KB)
下载次数: 494

爱车车 发表于 2011-8-20 09:36 | 显示全部楼层
支持楼主  !

有烟没火 发表于 2011-8-20 09:36 | 显示全部楼层
不会吧真来啦

只学java 发表于 2011-8-20 09:36 | 显示全部楼层


fossil 发表于 2011-8-20 09:37 | 显示全部楼层
技术+精神 赞

醉倚西风 发表于 2011-8-20 09:37 | 显示全部楼层
xsz 写道
技术+精神 赞



fossil 发表于 2011-8-20 09:37 | 显示全部楼层
IE9无法运行

fossil 发表于 2011-8-20 09:37 | 显示全部楼层
mmtye 写道
IE9无法运行

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

Jethro 发表于 2011-8-20 09:37 | 显示全部楼层
下载人不少,看帖的人也不少,怎么没什么人回帖,也没人评贴??

北大青鸟 发表于 2011-8-20 09:38 | 显示全部楼层
楼主,你别太当真了,呵呵
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 19:08 , Processed in 0.145170 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表