ESP8266 Piano - Quick and dirty

main.c

#include <Arduino.h>
#include <ESP8266WebServer.h>
#include "config.h"

#define PIN_BUZZER 4

ESP8266WebServer server(80);

volatile int freq = 500;

void ICACHE_FLASH_ATTR restart() {
    server.send(200, "text/html",
                F("<p>Your device is restarting...</p><p id=\"a\">It should come online in 15s</p><script>var a=15;setInterval(function(){a--;if(!a)window.location=\"/\";document.getElementById(\"a\").innerHTML=\"It should come online in \"+a+\"s\";},1000)</script>"));
    delay(500);
    ESP.restart();
}

void ICACHE_FLASH_ATTR root() {
    server.send(200, "text/html", "<input type='range' value='500' min='500' max='5000' id='slider'>\n<p id='p'></p>\n"
                                  "<script>\n    Array.prototype.remove = function () {\n        var what, a = arguments, L = a.length, ax;\n        while (L && this.length) {\n            what = a[--L];\n            while ((ax = this.indexOf(what)) !== -1) {\n                this.splice(ax, 1);\n            }\n        }\n        return this;\n    };\n\n    const p = document.getElementById('p');\n    let freqs = {\n        \"KeyA\": 262,\n        \"KeyS\": 294,\n        \"KeyD\": 330,\n        \"KeyF\": 349,\n        \"KeyG\": 392,\n        \"KeyT\": 415,\n        \"KeyH\": 440,\n        \"KeyJ\": 494,\n        \"KeyK\": 524,\n        \"KeyL\": 587,\n        \"KeyP\": 622,\n        \"Semicolon\": 659,\n    };\n\n    const pressed = [];\n\n    "
                                  "document.onkeydown = function (e) {\n        if(pressed[pressed.length - 1] === e.code){\n            return;\n        }\n        pressed.push(e.code);\n        let value = freqs[e.code] || 0;\n\n        p.innerHTML = value;\n        var xhr = new XMLHttpRequest();\n        xhr.open(\"POST\", '/freq', true);\n\n        xhr.setRequestHeader(\"Content-Type\", \"text/plain\");\n\n        xhr.onreadystatechange = function () { // Call a function when the state changes.\n            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {\n                // Request finished. Do processing here.\n            }\n        };\n        xhr.send(value);\n    };\n\n    document.onkeyup = function (e) {\n        pressed.remove(e.code);\n        let value;\n        if (pressed.length > 0) {\n            value = freqs[pressed[pressed.length - 1]] || 0;\n        } else {\n            value = 0;\n        }\n        p.innerHTML = value;\n        var xhr = new XMLHttpRequest();\n        xhr.open(\"POST\", '/freq', true);\n\n        xhr.setRequestHeader(\"Content-Type\", \"text/plain\");\n\n        xhr.onreadystatechange = function () { // Call a function when the state changes.\n            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {\n                // Request finished. Do processing here.\n            }\n        };\n        xhr.send(value);\n    }"
                                  "\n"
                                  "</script>");
}

void ICACHE_FLASH_ATTR callback() {
    if (!server.hasArg("plain")) {
        server.send(400);
    } else{
        freq = server.arg("plain").toInt();
        server.send(200);
    }
}

void setup() {
    WiFi.softAP("Pianino");

    Serial.begin(115200);

    server.on("/restart", restart);
    server.on("/freq",HTTP_POST, callback);
    server.on("/", root);
    server.begin();

    pinMode(PIN_BUZZER, OUTPUT);
}

void loop() {
    tone(PIN_BUZZER, freq);
    //noTone(PIN_BUZZER);
    server.handleClient();
}

piano.js

Array.prototype.remove = function() {
    var what, a = arguments,
        L = a.length,
        ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

const p = document.getElementById('p');
let freqs = {
    "KeyA": 262,
    "KeyS": 294,
    "KeyD": 330,
    "KeyF": 349,
    "KeyG": 392,
    "KeyT": 415,
    "KeyH": 440,
    "KeyJ": 494,
    "KeyK": 524,
    "KeyL": 587,
    "KeyP": 622,
    "Semicolon": 659,
};

const pressed = [];

document.onkeydown = function(e) {
    if (pressed[pressed.length - 1] === e.code) {
        return;
    }
    pressed.push(e.code);
    let value = freqs[e.code] || 0;

    p.innerHTML = value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/freq', true);
    xhr.setRequestHeader("Content-Type", "text/plain");
    xhr.send(value);
};

document.onkeyup = function(e) {
    pressed.remove(e.code);
    let value;
    if (pressed.length > 0) {
        value = freqs[pressed[pressed.length - 1]] || 0;
    } else {
        value = 0;
    }
    p.innerHTML = value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/freq', true);
    xhr.setRequestHeader("Content-Type", "text/plain");
    xhr.send(value);
}