乐趣区

关于javascript:在电脑上弹钢琴是什么体验

jiezi

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

退出移动版