最近用Vue + Tone.js做了一款钢琴类web应用,名字定为自由钢琴(AutoPiano),人生如音乐,欢快且自由。 此文权当作该项目的总结和分享~
项目简介
自由钢琴(AutoPiano)是利用HTML5技术开发的在线钢琴应用,致力于为钢琴爱好者、音乐爱好者以及其他所有的创造者提供一个优雅、简洁的平台,在学习工作之余可以享受钢琴、音乐的美好。就类似于多年前Flash开发的钢琴游戏,自由钢琴只是换了H5的技术,同时支持了钢琴曲的自动播放功能。
AutoPiano支持键盘按键和鼠标点击播放,同时琴键上会有按键和音名提示。另外,AutoPiano还有教学的功能,一种方式是快速入门
,通过简易的谱子按键进行演奏,另一种是演奏示例
,通过钢琴曲的自动播放来达到演示的目的。目前这两个功能都在持续完善中,如下图所示:
开发这样的应用需要乐理知识吗?
当然。基本的乐理知识还是要知道的,比如 CDEFGAB 音名、五线谱、调式、节奏等等还是要懂一点的。篇幅所限,这里就不展开讨论了,推荐两个网站:
其他的就是编程知识了,以及如何将乐理知识转化为程序逻辑。AutoPiano目前采用的技术架构是vue框架 + tone.js。
钢琴界面效果是怎么写的?
可以用CSS或贴图。笔者这里直接用css实现了,考虑到钢琴有黑键和白键,且黑键和白键有序地排列成 7:5的模式,所以实现起来并不复杂。
<div class="piano-key-wrap">
<div class="piano-key wkey" v-for="note in Notes" :key="note.keyCode" :data-keyCode = "note.keyCode" v-if="note.type=='white'" @click="clickPianoKey($event, note.keyCode)"></div>
<div class="bkey-wrap bkey-wrap1">
<div class="piano-key bkey" v-for="note in Notes" :key="note.keyCode" :data-keyCode = "note.keyCode" v-if="note.type=='black' && note.id >= 36 && note.id <= 40" @click="clickPianoKey($event, note.keyCode)"></div>
</div>
</div>
复制代码
.piano-wrap { width: 90%; margin: 20px auto;
.piano-key-wrap {
width: 100%;
background: @dark;
overflow: hidden;
position: relative;
.wkey {
display: inline-block;
width: 2.775%;
height: 100%;
margin: 0 auto;
background: linear-gradient(white 10%, rgb(251, 251, 251) 92%, rgb(220, 220, 220) 93%, white 97%);
border: solid 1px @dark;
border-radius: 0 0 5px 5px;
position: relative;
&:active {
background: linear-gradient(#eee 10%, #ddd 60%, #bbb 93%, #ccc 97%);
}
}
.wkey-active {
background: linear-gradient(#eee 10%, #ddd 60%, #bbb 93%, #ccc 97%);
}
.bkey-wrap {
width: 20%;
height: 0;
position: absolute;
top: 0;
}
.bkey-wrap1 {left: 0;}
.bkey-wrap2 {left: 19.5%;}
.bkey-wrap3 {left: 39%;}
.bkey-wrap4 {left: 58.3%;}
.bkey-wrap5 {left: 77.7%;}
.bkey {
display: inline-block;
width: 10%;
height: 70%;
background: linear-gradient(#000 10%, rgb(86, 86, 86) 85%, #000 90%);
border-radius: 0 0 3px 3px;
position: absolute;
top: 0;
overflow: hidden;
&:ac