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

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

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

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/