Клавиатура классического фортепиано состоит из 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);}
