学钢琴？用电脑就够了，实现网页版钢琴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代码

https://github.com/yongtaozheng/html-css-js-Achieve-cool-results

3、个人博客

http://47.113.84.128:8090/

在电脑上弹钢琴是什么体验？相关推荐

用计算机弹琴琴谱,在电脑上弹钢琴的软件
真钢琴很贵,大多数人家都没有钢琴,您是否想在电脑上弹钢琴呢?特此本站发布一款非常好用的在电脑上弹钢琴的软件,希望大家喜欢.使用该电脑弹钢琴软件您可以使用普通的电脑键盘演奏出美妙的钢琴曲并且自带音色库. ...
在电脑上体验了 16 款手机 App 后，我很失望
Windows 11 的发布会上,未来可使用 Android app 作为一大升级引起了大家的广泛讨论:如果你使用的是搭载 Apple Silicon 的 Mac,也可以在 App Store 的搜索 ...
逍遥android模拟器设置,逍遥安卓模拟器最佳设置电脑上玩手游流畅不卡多开更好用...
电脑上玩腾讯手游使用哪个手游模拟器助手软件?对于目前大部分用户来说适合自己电脑情况的才是最好用的.大部分想在电脑上使用手游模拟器的用户要么是为了手游挂机方便,要么就是为了能够使用鼠标键盘大屏幕更好的操 ...
iphone手机如何用计算机讲游戏,电脑怎么玩ios手游？电脑上玩苹果手机应用和游戏方法...
现在安卓模拟器非常多,很多用户都会在电脑上玩手游,体验很好,也不需要每天都抱着手机了,但是如果使用的是苹果手机呢?是的,IOS模拟器很少,很多用户甚至不知道有ios模拟器,其实已经有团队开发出了国内第 ...
精灵盛典电脑模拟器服务器怎么修改,电脑上玩精灵盛典：黎明手游，逍遥手游模拟器电脑上怎么使用...
精灵盛典:黎明电脑版对很多电脑上玩想精灵盛典:黎明手游的玩家来说应该是必须的,相对于手机上精灵盛典:黎明手游,电脑上使用手机模拟器玩精灵盛典:黎明手游,大屏幕,键鼠操控,性能更强,还可以多开挂机的优势 ...
实战清除电脑上恶意弹出广告窗口
实战清除电脑上恶意弹出广告窗口当你碰到电脑桌面右下角时不时弹出广告,如游戏推广.商品广告等,怎么删也删不掉,这是因为用户不小心安装有捆绑广告推广的软件,系统被静默安装了恶意木马广告,这不仅仅是影响用 ...
安卓x86程序安装目录_电脑上的安卓系统体验
分享下这几天体验的在电脑上安装的安卓系统,选用了Phoenix OS v3.0.7版本安卓系统版本号为7.1.1(没有选最新版,是因为新版本有广告,而这版可以体验到纯净的系统). 1安装方法该系统的安 ...
用电脑更新手机ios系统_macOS 11 正式版体验：大更新！苹果把 iOS 风格搬到了电脑上...
原标题:macOS 11 正式版体验:大更新!苹果把 iOS 风格搬到了电脑上今年的新 macOS 正式版推送,相比往年来得有些迟. 这显然和 Mac 晚发布有关,但往好的方面想,苹果也有了更充裕的 ...
电脑上如何禁止一切弹窗广告?永久关闭桌面弹出广告
现在日常生活工作离不开电脑,在用电脑办公的时候,弹窗广告总会打扰我们的办公,即使关闭弹窗也无用,很是让人讨厌,电脑上如何禁止一切弹窗广告?本篇教程教您如何快速关闭弹窗广告.如果您在使用电脑过程中,不小 ...

在电脑上弹钢琴是什么体验？