Learn to play the piano? With the computer is enough to achieve the web version of the piano 88 tone playing

A, cause

In fact, I had wanted to learn piano for a long time, but I had no chance. I happened to see someone on the Internet making a web version of piano. I tried it and found that most of them only had more than 10 notes, which was completely unsatisfying to me.

Second, preparation

In order to make this piano, I first searched a lot of information about the keys, and knew the 88 tones of the piano keys. After collecting the sound effects of the 88 keys, I began to write codes.

Three, masturbation code

1. Create black and white keys

var m = document.getElementById("main");
var bk = [2.3.5.6.7];
for(var i = 1; i<53; i++){// Create the element
    var newNode = document.createElement("div");
    // Add elements
    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++){// Create the element
        var newNode = document.createElement("div");
        // Add elements
        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)
    }
}
Copy the code

2. Music import function

// Import the file
var readAsText = document.getElementById("readAsText");
readAsText.addEventListener('click'.function(){
    showDataByText();
},false)

// Read data from a file
function showDataByText(){
    var that = this;
    var resultFile = document.getElementById("fileUpload").files[0];
    if (resultFile) {
        var reader = new FileReader();
        // Read files with GBK encoding
        reader.readAsText(resultFile,'GBK'); 
        reader.onload = function (e) {
            // console.log("e",e);
            // Get the upload file name
            var a = document.getElementById("fileUpload").value;
            // Truncate the filename suffix
            var atype = a.substring(a.length-3);
            // Get the text content of the file
            var urlData = this.result;
            // Determine the type of file to be uploaded
            if(atype ! ="txt"){
                alert("Please select TXT file");
            }
            else{
                // document.getElementById("result").innerHTML += urlData;
                // console.log(urlData);autoPlayMusic(urlData); }}; }}Copy the code

3. Play the sound of keys

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); }}Copy the code

4. Realize the function of reading piano score automatically

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);
}
	
Copy the code

5. Keyboard monitoring

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; }}Copy the code

Four, achieve the effect

Can play through the keyboard, can also upload music to achieve automatic performance, in general, or achieve very good, but their playing level is limited, can not pop up very good music. Because the computer keyboard is not enough, so FOR the time being I just put five sets of tones into it, I hope those who have ideas can give me feedback, thank you for watching.

Five, the play

Six, the trial address

1. Trial address

http://47.113.84.128/Piano/piano.html

GitHub code

Github.com/yongtaozhen…

3. Personal blogs

http://47.113.84.128:8090/