Пианино на JavaScript

Напишем Пианино на JavaScript.

Клавиатура классического фортепиано состоит из 88 клавиш, покрывающих диапазон от A0 (Ля суб-контр-октавы, частота звучания 27.5 Гц) до C8 (До пятой октавы, частота 4186 Гц).

Каждая октава на клавиатуре состоит из двенадцати нот:
До, До-диез, Ре, Ре-диез, Ми, Фа, Фа-диез, Соль, Соль-диез, Ля, Ля-диез/Си-бемоль, Си. Жирным выделены клавиши верхнего ряда. Они на клавиатуре обычно бывают черного цвета.

Вот так выглядит одна октава:

Просто взглянув на таблицу частот звучания нот, становится очевидной закономерность: каждая последующая октава ровно вдвое выше предыдущей. Таким образом, можно сказать, что:

Nx = N1 × 2x-1, где:
N – название ноты;
x — номер октавы (от 0 до 8);
Nx, соответственно, частота звука, соответствующая ноте N октавы x;

В формуле фигурирует N1 вместо N0 лишь потому, что часть нот суб-контр-октавы (N0) имеет частоту звучания ниже порога слышимости человеческим ухом (< 20 Hz).

Чтобы ноты получались чистыми, нам нужны достаточно точные значения частот нот контроктавы, от которой мы начинаем считать. Вот они:

C: 32.703,
С#: 34.648,
D: 36.708,
D#: 38.891,
E: 41.203,
F: 43.654,
F#: 46.249,
G: 48.999,
G#: 51.913,
A: 55,
A#: 58.27,
B: 61.735

Основываясь на этом, напишем функцию, принимающую в качестве аргумента строку с именем клавиши в виде "A4" или "C5#", и возвращающую частоту её звучания:

function play(key) {
    var controctave = {
            'C': 32.703,
            'С#': 34.648,
            'D': 36.708,
            'D#': 38.891,
            'E': 41.203,
            'F': 43.654,
            'F#': 46.249,
            'G': 48.999,
            'G#': 51.913,
            'A': 55,
            'A#': 58.27,
            'B': 61.735,
        },
        note = key[0].toUpperCase(),
        octave = parseInt(key[1]),
        sharp = key[2] == '#' ? true : false;
    if (sharp) {
        return controctave[note + '#'] * Math.pow(2, octave-1);
    } else {
        return controctave[note] * Math.pow(2, octave-1);
    }
}

Немного подсократим код нашей функции:

function play(key) {
    var controctave = { 'C': 32.703, 'С#': 34.648, 'D': 36.708, 'D#': 38.891, 'E': 41.203, 'F': 43.654, 'F#': 46.249, 'G': 48.999, 'G#': 51.913, 'A': 55, 'A#': 58.27, 'B': 61.735};
    freq = key[2] == '#' ? controctave[key[0].toUpperCase() + '#'] * Math.pow(2, (key[1]|0) - 1) : controctave[key[0].toUpperCase()] * Math.pow(2, (key[1]|0) - 1);
    return freq; }


Теперь нарисуем клавиатуру.

88 клавиш клавиатуры начинаются с ноты Ля (A0).

Соответственно, цикл будет такой: в цикле рисуем по 12 клавиш, и каждую вторую, четвертую, седьмую, девятую и одиннадцатую делаем чёрной. Каждой клавише присвоим id, соответствующий ноте, которую она должна воспроизводить при нажатии.

Получится так:

var width = 1000;
var deck = document.createElement('div'),
    octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'],
    id = "",
    keynumber = 0,
    whitekeys = 0,
    keys = [];

deck.style.width = width;

parent:
for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        keynumber = (i * 12) + j;
        if (keynumber >= 88) break parent;
        keys[keynumber] = document.createElement('div');
        keys[keynumber].style.border = "1px solid black";
        keys[keynumber].style.position = "absolute";
        id = (octave[j][1] == '#') ? octave[j] + i + 's' : octave[j] + i;
        keys[keynumber].id = id;

        switch(j%12) {
            case 1:
            case 3:
            case 6:
            case 8:
            case 10:
                keys[keynumber].style.backgroundColor = 'black';
                keys[keynumber].style.left = ((width / 50 * whitekeys) - (width / 200)) + 'px';
                keys[keynumber].style.width = width/100 + "px";
                keys[keynumber].style.height = "200px";
                keys[keynumber].style.zIndex = 10;
                break;
            default:
                keys[keynumber].style.backgroundColor = 'white';
                keys[keynumber].style.left = (width / 50 * whitekeys) + 'px';
                keys[keynumber].style.width = width/50 + "px";
                keys[keynumber].style.height = "300px";
                whitekeys++;

        }

        deck.appendChild(keys[keynumber]);

    }
}

document.body.appendChild(deck);

И вновь превратим применим небольшую оптимизацию кода, сделав его более компактным:

var width = 1000, octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'], id = "", div, whitekeys=0, keys = [];
parent: for (var i = 0; i < 8; i++) {
    for (var j = 0; j < 12; j++) {
        if ((i * 12) + j >= 88) break parent;
        div = document.createElement('div');
        div.id = (octave[j][1] == '#') ? octave[j][0] + ((((i * 12) + j + 9) / 12)|0) + 's' : octave[j] + ((((i * 12) + j + 9) / 12)|0);
        if (j % 12 == 1 || j % 12 == 4 || j % 12 == 6 || j % 12 == 9 || j % 12 == 11) {
            div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:black; left:' + ((width / 50 * whitekeys) - (width / 200)) + 'px; width:' + width/100 + 'px; height: 200px; z-index:1;');}
        else {
            div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:white; left:' + (width / 50 * whitekeys) + 'px; width:' + width/50 + 'px; height:300px;');
            whitekeys++;
        }
        document.body.appendChild(div);}}


Научим пианино издавать звуки.

Для этого нам понадобится Web Audio API, который на сей момент поддерживается только Webkit-based браузерами и Firefox.

Добавим в строку объявления глобальных переменных создание аудиоконтекста:

context = window.AudioContext ? new AudioContext() : new webkitAudioContext();

Добавим обработчик нажатий на клавиши:

document.body.addEventListener('click', play);

Саму функцию play изменим следующим образом:

function play(e) {
    var controctave = { 'C': 32.703, 'Cs': 34.648, 'D': 36.708, 'Ds': 38.891, 'E': 41.203, 'F': 43.654, 'Fs': 46.249, 'G': 48.999, 'Gs': 51.913, 'A': 55, 'As': 58.27, 'B': 61.735}, osc = context.createOscillator();
    osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1);
    osc.type = "square";
    osc.connect(context.destination);
    osc.start(0);
    setTimeout(function() {
        osc.stop(0);
        osc.disconnect(context.destination);
    }, 1000 / 2);}


Здесь мы создали осциллятор: osc = context.createOscillator();,
установили ему необходимую частоту звучания: osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1);,
установили форму сигнала: osc.type = "square"; (по умолчанию был синусоидальный) соединили его с устройством вывода звука: osc.connect(context.destination);
и дали команду начать воспроизведение: osc.start(0);.
После этого нам необходимо заставить клавишу замолчать через некоторое время (500мс), а то она так и будет противно пищать. Для этого используем osc.stop(0), завёрнутый в интервал. Обязательный элемент: osc.disconnect(context.destination); - отключаем осциллятор от устройства вывода.

В итоге у нас получился вот такой код пианино на JavaScript:

var width = 1000, octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'], id = "", div, whitekeys=0, keys = [],context = window.AudioContext ? new AudioContext() : new webkitAudioContext();
parent: for (var i = 0; i < 8; i++) {
for (var j = 0; j < 12; j++) {
if ((i * 12) + j >= 88) break parent;
div = document.createElement('div');
div.id = (octave[j][1] == '#') ? octave[j][0] + ((((i * 12) + j + 9) / 12)|0) + 's' : octave[j] + ((((i * 12) + j + 9) / 12)|0);
if (j % 12 == 1 || j % 12 == 4 || j % 12 == 6 || j % 12 == 9 || j % 12 == 11) {
div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:black; left:' + ((width / 50 * whitekeys) - (width / 200)) + 'px; width:' + width/100 + 'px; height: 200px; z-index:1;');}
else {
div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:white; left:' + (width / 50 * whitekeys) + 'px; width:' + width/50 + 'px; height:300px;');
whitekeys++;
}
document.body.appendChild(div);}}
document.body.addEventListener('click', play);
function play(e) {
var controctave = { 'C': 32.703, 'Cs': 34.648, 'D': 36.708, 'Ds': 38.891, 'E': 41.203, 'F': 43.654, 'Fs': 46.249, 'G': 48.999, 'Gs': 51.913, 'A': 55, 'As': 58.27, 'B': 61.735}, osc = context.createOscillator();
osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1);
osc.type = "square";
osc.connect(context.destination);
osc.start(0);
setTimeout(function() {
   osc.stop(0);
   osc.disconnect(context.destination);
}, 1000 / 2);}