学钢琴？用电脑就够了，实现网页版钢琴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://jdhnv787.xyz/JYeontu/#/cssEffects/piano
2、GitHub代码
https://github.com/yongtaozheng/html-css-js-Achieve-cool-results
