Keyboard

by Blueprinter

HTML

<canvas></canvas>

CSS

html, body {
    margin:0;
}
canvas {
    position:absolute;
}

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var aCtx = new AudioContext(),
    currentOscillator = null,
    currentGain = null,
    curKey = null,
    canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    keys = [],
    playing = false;

var key = function (settings) {
    this.freq = settings.freq;
    this.pos = settings.pos;
    this.color = settings.color;
}

key.prototype.play = function () {
    var osc = aCtx.createOscillator(),
        gain = aCtx.createGain();

    osc.type = "sine";
    osc.frequency.value = this.freq;
    osc.start(0);
    currentOscillator = osc;
    currentGain = gain;

    gain.gain.value = 1;
    osc.connect(gain);
    gain.connect(aCtx.destination);
};

key.prototype.down = function () {
    ctx.fillStyle = "black";
    ctx.fillRect(this.pos.x, this.pos.y, this.pos.w, this.pos.h);
};

key.prototype.up = function () {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.pos.x, this.pos.y, this.pos.w, this.pos.h);
};

function checkKeys(x, y) {
    keys.forEach(function (e) {
        if (x > e.pos.x && x < e.pos.x + e.pos.w && y > e.pos.y && y < e.pos.y + e.pos.h) {
            e.play();
            e.down();
        } else {
            e.up();
        }
    });
};

canvas.width = 600;
canvas.height = 200;
var keyWidth = 40;

for (var i = 0; i < 15; i++) {

    var r = ~~ (Math.random() * 255),
        g = ~~ (Math.random() * 255),
        b = ~~ (Math.random() * 255);

    keys.push(
    new key({
        freq: 100 + i * 100,
        pos: {
            x: i * keyWidth,
            y: 0,
            w: keyWidth,
            h: canvas.height
        },
        color: "rgb(" + r + "," + g + "," + b + ")"
    }));

    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
    ctx.fillRect(i * keyWidth, 0, keyWidth, canvas.height);
}


canvas.addEventListener('mousedown', function (e) {
    playing = true;
    checkKeys(e.x, e.y);
});

canvas.addEventListener('touchstart',...