Виртуальное пианино

Пианино в вашем браузере

Это виртуальное пианино даёт вам клавиатуру диапазоном в две октавы и терцию — 29 клавиш от C до E — прямо в браузере. Играть можно мышью, одним или несколькими пальцами на сенсорном экране или на клавиатуре компьютера, причём на каждой клавише на экране подписана её горячая клавиша. Это удобно, чтобы проверить мелодию, которая крутится в голове, найти первую ноту песни, подобрать аккорды, поупражняться в простых пьесах, когда рядом нет настоящего инструмента, или просто развлечься.

Кнопки октавы сдвигают всю клавиатуру на двенадцать полутонов вверх или вниз, так что общий диапазон охватывает звуки от C1 до E7. Текущий диапазон отображается между кнопками, а на клавишах C указан номер октавы (до первой октавы — это C4). Переключатель сустейна работает как правая педаль акустического фортепиано: ноты продолжают звучать и накладываются друг на друга, а ползунок громкости задаёт общий уровень.

Как создаётся звук

Ничего не скачивается и не транслируется: каждая нота синтезируется на лету с помощью Web Audio API. Осциллятор треугольной волны формирует основу тембра, а более тихая синусоида на октаву выше добавляет яркости. Огибающая усиления придаёт каждой ноте быструю атаку с постепенным затуханием, как у ударенной струны, а компрессор на выходе не даёт громким аккордам искажаться. Поскольку звуковой движок создаётся только при первом нажатии клавиши, страница остаётся лёгкой и соответствует правилам автовоспроизведения браузеров.

Игра на клавиатуре компьютера

Раскладка повторяет пианино: нижний ряд букв (от Z до M) — это белые клавиши нижней октавы, а ряд над ним (S, D, G, H, J) отвечает за чёрные клавиши. Верхний ряд букв от Q до U — следующая октава, где цифровые клавиши 2, 3, 5, 6 и 7 играют диезы и бемоли, а I, 9, O, 0 и P доходят до верхней границы клавиатуры. Клавиши распознаются по их физическому расположению, поэтому раскладка одинаково работает на клавиатурах QWERTY, AZERTY и QWERTZ. Удерживайте несколько клавиш одновременно, чтобы играть аккорды.