学钢琴？用电脑就够了，实现网页版钢琴88音弹奏
一、起因
其实自己想学钢琴很久了，一直没有机会，偶然看到了网上有人做了网页版的钢琴，我试玩了一下，发现大多只有10多个音，这是完全无法满足我的，对此有了想要自己制作一个网页版钢琴的想法。
二、准备工作
为了制作这个钢琴，我首先是去查找了很多琴键的相关信息资料，知道了钢琴琴键的88个音，之后收集了88个琴键的音效就可以开始写代码了。
三、撸代码
1、创建黑白琴键
var m = document.getElementById("main");
var bk = [2,3,5,6,7];
for(var i = 1;i<53;i++){
//创建元素
var newNode = document.createElement("div");
//添加元素
newNode.id = "key" + i;
newNode.className = "white";
newNode.style.width = 100/52 + "vw";
// newNode.innerText = (i+5)%7;
m.appendChild(newNode)
if(i==1){
newNode = document.createElement("div");
newNode.id = "key" + 53;
newNode.className = "black";
newNode.style.left = 75/52 + "vw";
newNode.style.width = 50/52 + "vw";
// newNode.innerText = i;
m.appendChild(newNode)
}
}
var bb = 54;
for(i=1;i<8;i++){
for(var j = 0;j<bk.length;j++){
//创建元素
var newNode = document.createElement("div");
//添加元素
newNode.id = "key" + bb;
bb++;
newNode.className = "black";
newNode.style.left = ((bk[j]+(i-1)*7)*100/52+75/52)+"vw";
newNode.style.width = 50/52 + "vw";
// newNode.innerText = i*(j+1);
newNode.style.color = "white";
m.appendChild(newNode)
}
}
2、曲谱导入功能
//导入文件
var readAsText = document.getElementById("readAsText");
readAsText.addEventListener('click',function(){
showDataByText();
},false)
//通过文件读取数据
function showDataByText(){
var that = this;
var resultFile = document.getElementById("fileUpload").files[0];
if (resultFile) {
var reader = new FileReader();
//以GBK编码读取文件
reader.readAsText(resultFile,'GBK');
reader.onload = function (e) {
// console.log("e",e);
//获取上传文件名
var a = document.getElementById("fileUpload").value;
//截取文件名后缀
var atype = a.substring(a.length-3);
//获取文件文本内容
var urlData = this.result;
//判断上传文件类型
if(atype != "txt"){
alert("请选择txt文件");
}
else{
// document.getElementById("result").innerHTML += urlData;
// console.log(urlData);
autoPlayMusic(urlData);
}
};
}
}
3、琴键声音播放
function playSound(noteNumber){
var soundId = 'sound' + noteNumber;
var keyId = 'key' + noteNumber;
var key = document.getElementById(keyId);
var audio = null;
if(key){
audio = new Audio("sound/"+noteNumber+".mp3");
audio.play();
key.style.backgroundColor = '#9cf';
setTimeout('setOriginColor(' + noteNumber + ')', 100);
}
}
4、自动读取琴谱弹奏功能实现
var ii = 0,music;
var autoplay = function(){
playSound(keyfrom[music[ii]]);
ii++;
if(ii<music.length)
if(music[ii] == 0 ) {
setTimeout('autoplay()', 300);
}
else {
setTimeout('autoplay()', 320);
}
}
var autoPlayMusic = function(e){
ii = 0;
e.replace("/n","");
music = e.split(',');
setTimeout('autoplay()', 2000);
console.log(music);
}
5、键盘监听
document.onkeydown = function(e) {
var pressEvent = e || window.event;
var keyCode = '';
if(pressEvent.keyCode){
keyCode = pressEvent.keyCode;
}else if(pressEvent.charCode){
keyCode = pressEvent.charCode;
}else if(pressEvent.which){
keyCode = pressEvent.which;
}
switch(keyCode){
case 97: //1
playSound(24);
break;
case 98: //2
playSound(25);
break;
case 99: //3
playSound(26);
break;
case 100: //4
playSound(27);
break;
case 101: //5
playSound(28);
break;
case 102: //6
playSound(29);
break;
case 103: //7
playSound(30);
break;
case 104: //8
playSound(31);
break;
case 105: //9
playSound(32);
break;
case 111: ///
playSound(33);
break;
case 106: //*
playSound(34);
break;
case 109: //-
playSound(35);
break;
case 107: //+
playSound(36);
break;
case 13: //enter
playSound(37);
break;
case 65: // a
playSound(17);
break;
case 83: // s
playSound(18);
break;
case 68: // d
playSound(19);
break;
case 70: // f
playSound(20);
break;
case 71: // g
playSound(21);
break;
case 72: // h
playSound(22);
break;
case 74: // j
playSound(23);
break;
case 75: // k
break;
case 87: // w
playSound(64);
break;
case 69: // e
playSound(65);
break;
case 84: // t
playSound(66);
break;
case 89: // y
playSound(67);
break;
case 85: // u
playSound(68);
break;
case 86: // v
playSound(38);
break;
case 66: // b
playSound(39);
break;
case 78: // n
playSound(40);
break;
case 77: // m
playSound(41);
break;
case 188: // ,
playSound(42);
break;
case 190: // .
playSound(43);
break;
case 191: // /
playSound(44);
break;
case 49: //1
playSound(10);
break;
case 50: //2
playSound(11);
break;
case 51: //3
playSound(12);
break;
case 52: //4
playSound(13);
break;
case 53: //5
playSound(14);
break;
case 54: //6
playSound(15);
break;
case 55: //7
playSound(16);
break;
default:
break;
}
}
四、实现效果
可以通过键盘弹奏，也可以通过上传乐谱实现自动演奏，总的来说还是实现得很不错的，奈何自己弹奏水平有限，无法弹出很好的音乐。由于电脑键盘不是很够，所以暂时我只是放了五组音调进去，希望有想法的可以跟我反馈反馈，感谢大家的观看。
五、玩法
六、试玩地址
1、试玩地址
http://47.113.84.128/Piano/piano.html
