学钢琴？用电脑就够了，实现网页版钢琴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: //1playSound(24);break;case 98: //2playSound(25);break;case 99: //3playSound(26);break;case 100: //4playSound(27);break;case 101: //5playSound(28);break;case 102: //6playSound(29);break;case 103: //7playSound(30);break;case 104: //8playSound(31);break;case 105: //9playSound(32);break;case 111: ///playSound(33);break;case 106: //*playSound(34);break;case 109: //-playSound(35);break;case 107: //+playSound(36);break;case 13: //enterplaySound(37);break;case 65:// aplaySound(17);break;case 83:// splaySound(18);break;case 68:// dplaySound(19);break;case 70:// fplaySound(20);break;case 71:// gplaySound(21);break;case 72:// hplaySound(22);break;case 74:// jplaySound(23);break;case 75:// kbreak;case 87:// wplaySound(64);break;case 69:// eplaySound(65);break;case 84:// tplaySound(66);break;case 89:// yplaySound(67);break;case 85:// uplaySound(68);break;case 86:// vplaySound(38);break;case 66:// bplaySound(39);break;case 78:// nplaySound(40);break;case 77:// mplaySound(41);break;case 188:// ,playSound(42);break;case 190:// .playSound(43);break;case 191:// /playSound(44);break;case 49://1playSound(10);break;case 50://2playSound(11);break;case 51://3playSound(12);break;case 52://4playSound(13);break;case 53://5playSound(14);break;case 54://6playSound(15);break;case 55://7playSound(16);break;default:break;}}
四、实现效果
可以通过键盘弹奏，也可以通过上传乐谱实现自动演奏，总的来说还是实现得很不错的，奈何自己弹奏水平有限，无法弹出很好的音乐。由于电脑键盘不是很够，所以暂时我只是放了五组音调进去，希望有想法的可以跟我反馈反馈，感谢大家的观看。
五、玩法
六、试玩地址
1、试玩地址
http://jdhnv787.xyz/JYeontu/#/cssEffects/piano
2、GitHub代码
/yongtaozheng/html-css-js-Achieve-cool-results
3、个人博客
http://47.113.84.128:8090/
如果觉得《在电脑上弹钢琴是什么体验？》对你有帮助，请点赞、收藏，并留下你的观点哦！
