cPiano制作笔记 | javascript和css

原创 小赛艇  2017-11-09 12:51  阅读 731 次

cPiano: xsaiting.com/cpiano GitHub: github.com/xsaiting/cpiano

1、画琴键

首先,要实现缩放功能,所有尺寸都使用em单位,1em单位=当前元素的font-size

然后先画出1个黑键和白键:

这样就得到了3em*10em的白键,2.4em*6em+左右各0.3em边距的黑键。如果横向堆叠起来就可以画出琴键了。
再修改定位:

.wkey与.bkey采用绝对定位,这样可以让他们重叠在一起。

.whitekey和.blackkey/.blankkey分别相对于.wkey和.bkey定位,这样保证了他们的起始位置之间的关系。

用div.wkey包住div.whitekey就画出了白键,div.bkey包住div.blackkey就画出了黑键,使用div.blankkey来填充黑白键之间的空白,一排琴键就画完了。

2、播放音效

这段就是将keyId(例如up-11代表上面一排键的第11个)转化为SoundName(例如'c4' 'd4' 'cs4'代表C#4),然后播放相应的Audio对象

3、记录按键

如果仅使用

来实现弹奏,就会有一个很大的问题:一次只能按一个键,而且还是按下并弹起才发出声音。

如果把onkeypress改成onkeydown,又会有按住一个键就不停响的问题。

解决方法:

用一个数组cKeyRecord来储存正在按下的键,每次按下键时向数组添加并播放声音。

4、快速衰减

实现了上面几个步骤后,现在按下几个键可以同时发声了,但又有一个新问题,快速弹下多个键时,由于前面的键音不能很快地消除,导致声音很混乱。如果强行修改mp3文件,使每个键发声时间剪短,这样当持久地按下某个键时,声音又不能保持很久。

解决方法:当抬起一个按键时,快速淡出这个键的声音。如果短时间内再次按下这个键,取消淡出,从头播放。

5、加入动画

这部分做得不是很好,是用javascript+css样式完成的,以后可以考虑是用css3动画,下一个版本再说吧。。。就不贴这一部分代码了。

6、鼠标和触摸支持

最后,当鼠标点击、屏幕触摸某个琴键时,和按下按键执行相同的函数;同理松开鼠标、停止触摸。

完成,cPiano就是这样制作完成了~

本文地址:https://xsaiting.com/cpiano.html
版权声明:本文为原创文章,版权归 小赛艇 所有,转载请保留出处!
喜欢请点赞/打赏/分享这篇文章哦!

发表评论


表情