Untitled

<html>
<header>

<script lang="javascript" >
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

var sineTerms = new Float32Array([0, 0, 1, 0, 1]);
var cosineTerms = new Float32Array(sineTerms.length);
var customWaveform = audioCtx.createPeriodicWave(cosineTerms, sineTerms);

var pianoFreqKeyMap = {
    "]":"739.989",
    "'":"698.456",
    ";":"659.255",
    "p":"622.254",
    "l":"587.330",
    "o":"554.365",
    "k":"523.251",
    "j":"493.883",
    "u":"466.164",
    "h":"440.000",
    "y":"415.305",
    "g":"391.995",
    "t":"369.994",
    "f":"349.228",
    "d":"329.628",
    "e":"311.127",
    "s":"293.665",
    "w":"277.183",
    "a":"261.626"
}

var keysToIgnore = {
    'Alt': true
}

var oscillators = {};
function playNote(frequency, id) {
    // create Oscillator node
    var oscillator = audioCtx.createOscillator();
    oscillator.setPeriodicWave(customWaveform);
    if(oscillators[id]) {
        oscillators[id].stop();

    }

    oscillators[id] = oscillator;
  //  oscillator.type = 'square';
    oscillator.frequency.value = frequency; // value in hertz
    oscillator.connect(audioCtx.destination);
    oscillator.start();
}

function stopNote(id) {
    if(oscillators[id]) {
        oscillators[id].stop();
        oscillators[id] = null;
    }
}

function startNote(e) {
    console.log(e);

    console.log(`REPEAT: ${e.repeat}`)
    if(!e.repeat && !keysToIgnore[e.key]) {
        var freq = e.keyCode *20;
        if(pianoFreqKeyMap[e.key]) {
            freq = pianoFreqKeyMap[e.key]
        }
        playNote(freq, e.key);

        displayKeys();
    }

}

function toColor(num) {
    num >>>= 0;
    var b = num & 0xFF,
        g = (num & 0xFF00) >>> 8,
        r = (num & 0xFF0000) >>> 16,
        a = ( (num & 0xFF000000) >>> 24 ) / 255 ;
    return "rgba(" + [r, g, b, a].join(",") + ")";
}

function displayKeys() {
   // document.body.innerHTML = '';
    for (const key in oscillators) {
        if (oscillators.hasOwnProperty(key)) {
            const element = oscillators[key];
            if(element) {
                document.body.innerHTML = `<div style="background-color: ${toColor(element.frequency.value * 10000000)}"><h1>${key}</h1></div>` + document.body.innerHTML;
            }

        }
    }
}

function endNote(e) {
    console.log(e)
    if(!keysToIgnore[e.key]) {
        stopNote(e.key);
    }
}

window.addEventListener("keydown", startNote);
window.addEventListener("keyup", endNote);
</script>
</header>

<body>

</body>
</html>