共计 3999 个字符，预计需要花费 10 分钟才能阅读完成。
学钢琴？用电脑就够了，实现网页版钢琴 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 音频警告：播放链接不能为空 ]);
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/pi…
2、GitHub 代码
https://github.com/yongtaozhe…
3、集体博客
http://47.113.84.128:8090/
正文完
发表至： javascript
2021-08-29
