Пианино в 24 строки на Javascript: если играть, то музыку
Пока производители телефонов меряются, у кого тоньше, программисты продолжают меряться, у кого короче.
Я тоже решил принять участие в этой специальной спонтанной олимпиаде кодерского мастерства, и вспомнил фразу одной моей подруги-музыканта: «Если уж играть, то на пианино». И решил: да будет так. Вместо игры напишу пианино. И написал.
Оговорюсь сразу: я ни разу не музыкант, моё музыкальное образование ограничивается десятком блатных песенок на расстроенной гитаре, так что, с терминологией могу и обязательно буду безбожно врать, но буду чертовски рад, если вы меня будете в этом поправлять.
Итак, начнем.
Клавиатура классического фортепиано состоит из 88 клавиш, покрывающих диапазон от A0 (Ля суб-контр-октавы, частота звучания 27.5 Гц) до C8 (До пятой октавы, частота 4186 Гц). Каждая октава на клавиатуре состоит из двенадцати нот:
До, До-диез, Ре, Ре-диез, Ми, Фа, Фа-диез, Соль, Соль-диез, Ля, Ля-диез/Си-бемоль, Си. Жирным выделены клавиши верхнего ряда, они на клавиатуре обычно бывают черного цвета.
Собственно, вот так выглядит одна октава:
Просто взглянув на таблицу частот звучания нот, становится очевидной закономерность: каждая последующая октава ровно вдвое выше предыдущей. Таким образом, можно сказать, что:
- N – название ноты;
- x — номер октавы (от 0 до 8);
- Nx, соответственно, частота звука, соответствующая ноте N октавы x;
Чтобы ноты получались чистыми, нам нужны достаточно точные значения частот нот контроктавы, от которой мы начинаем считать. Собственно, вот они:
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#» , и возвращающую частоту её звучания:
Ах, да, мы же пишем не красиво, а коротко. Немного подсократим:
Уже использовано четыре строчки кода.
Давайте нарисуем клавиатуру
88 клавиш клавиатуры начинаются с ноты Ля (A0).
Соответственно, цикл будет такой: в цикле рисуем по 12 клавиш, и каждую вторую, четвертую, седьмую, девятую и одиннадцатую делаем черной. Каждой клавише присвоим id, соответствующей ноте, которую она должна воспроизводить при нажатии.
И вновь превратим нормальный код в нечитабельное говнище применим небольшую оптимизацию.
Мы израсходовали ещё 13 строк.
Научим пианино издавать звуки
Для этого нам понадобится Web Audio API, который на сей момент поддерживается только Webkit-based браузерами и Firefox.
Добавим в строку объявления глобальных переменных создание аудиоконтекста:
добавим обработчик нажатий на клавиши:
а саму функцию play изменим следующим образом:
Здесь мы создали осциллятор: 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); — отключаем осциллятор от устройства вывода.
Резюмируем: у нас получился вот такой нехитрый код:
В заключение хочу сказать, что теперь меня надо называть Страдивари XXI века Web Audio API — штука очень классная и интересная. Почитать про него можно, естественно, на MDN, могу посоветовать милый туториал на HTML5Rocks и ещё один забавный эксперимент.
А пианино вышло жутко примитивное, но экспериментом я всё равно доволен. Надеюсь, вам тоже было интересно.
P.S. динамики макбука, например, отказываются издавать слышимые звуки вплоть до малой октавы (т.е. до 130 Гц), что неудивительно. В общем, не удивляйтесь, если левая часть клавиатуры будто бы вообще не звучит.
Евгений Черняков
Олег Кузьменко
Особая благодарность Томми Монтгомери за его PHP MIDI Parser, Александру Косюку за ценные советы, а также Васе Обломову за песню “Еду в Магадан”, которая, как ни странно, вдохновила нас на создание этого проекта.
ВНИМАНИЕ! Смартфоны через браузер специально затормаживают звуки (не дают звучать одному, пока не затихнет предыдущий), чтобы скрыть свою низкую производительность. Стало быть, сайт будет работать как попало. Увы, такие они «современные технологии». Под андроид есть приложения, под айос пока нет (ибо нет времени и денег).
Нажмите кнопку воспроизведения, чтобы услышать мелодию и увидеть, как ее играть. Поставьте на паузу и стрелками на экране или клавиатуре просматривайте пошагово. Зацикливайте как всю мелодию, так и фрагмент, если требуется.
Можно использовать не только экранные кнопки,а и клавиатуру
Главная цель «Пианизатора»— обучить не исполнению всего произведения (иногда это нереально сделать лишь на пианино), а помочь новичку быстро преодолеть страх перед инструментом и избавить его от скучных и неинтересных уроков.
Поэтому здесь собраны наиболее яркие фрагменты известных композиций. Сперва мы размещали какой-то самый-самый момент, а в дальнейшем стали добавлять максимально возможное число частей. Если имеющегося фрагмента вам недостаточно или вы хотите разучить мелодию, которой здесь еще нет, то смело пишите на pianizator6912@gmail.com, попробуем подготовить уроки.
Драйвового вам обучения!
Есть приложения под Андроид. Классический Пианизатор (как и на сайте одним пальцем) и Гранд Пианизатор (две руки и аккорды).
Обычный Пианизатор бесплатный, но вы можете установить версию за 100 рублей, чтобы поддержать автора. Гранд Пианизатор платный, но есть бесплатная демо-версия.
Интерфейс онлайн фортепиано.
В левой части верхней панели располагаются кнопки управления раскладкой, описанные выше. Чуть правее находится дисплей, на котором отображается фортепианная нота, звучащая в данный момент и ее порядковый номер на клавиатуре рояля. Следует отметить, что названия нот выводятся на экран в традиционном для России формате: До, Ре, Ми, Фа, Соль, Ля, Си, До. В английской же традиции используется буквенное обозначение музыкальных нот, соответственно, C, D, E, F ,G, A, B. Здесь она не применяется. Справа от названия ноты указывается знак бемоль или диез.
Далее, после нотного дисплея, идет индикатор звука. На нем отражается спектральный рисунок звука, который вы слышите в данный момент. И, наконец, в самой правой части панели находится регулятор громкости. Перетаскивая его вверх и вниз, вы можете отрегулировать громкость звука пианино.
Как играть диезы и бемоли?
Рассмотрим все клавиши, которые входят в любую октаву: если посчитать вместе черные и белые, то, оказывается, что их в сумме выходит 12 (7 белых + 5 чёрных). Получается, что октава разделена на 12 частей (12 равных ступенек), и каждая клавиша в данном случае – одна часть (одна ступенька). Вот, расстояние от одной клавиши до самой близкой соседней – это полутон (неважно, куда откладывать полутон: вверх или вниз, между двумя белыми или между чёрной и белой клавишей). Итак, октава состоит из 12 полутонов.
Диез – это повышение основной ступени на полутон, то есть, если нам нужно сыграть, скажем, ноту до-диез, то мы нажимаем не клавишу «до», а ту ноту, которая на полутон выше. До-диез – соседняя чёрная клавиша (справа от клавиши «до»).
Бемоль имеет обратное действие. Бемоль – это понижение основной ступени на полутон. Если нам нужно сыграть, к примеру, си-бемоль, то мы играем не белую «си», а нажимаем соседнюю чёрную клавишу, которая ниже этой «си» (слева от клавиши «си»).
Теперь понятно, что каждая чёрная клавиша – это или диез или бемоль какой-нибудь из соседних «белых» нот. Но не всегда диез или бемоль занимает именно чёрную клавишу. Например, между такими белыми клавишами, как ми и фа, или си и до, нет чёрных. И как тогда играть до-бемоль или ми-диез?
Очень просто – все по тому же правилу: диез на полтона выше, бемоль на полтона ниже. Напоминаю, что полутон – это кратчайшее расстояние между любыми двумя соседними клавишами. Значит, для того чтобы сыграть до-бемоль, спускаемся на полтона – получаем, что до-бемоль совпадает по высоте с нотой си. Аналогично, нужно играть ми-диез – поднимаемся на полутон: ми-диез совпадает с клавишей фа. Звуки, которые одинаковы по высоте, но по-разному записываются, называются энгармоническими (энгармонически равными).
Ну, вот и всё! Я думаю, всё понятно. Мне осталось добавить по поводу того, как диез и бемоль обозначают в нотах. Для этого используют специальные значки, которые записываются перед той нотой, которую нужно изменить.
Как играть на пианино онлайн начинающим?
Этот виртуальный инструмент подходит тем, кто ни разу в жизни не имел дела с реальными клавишами, но захотел попробовать поиграть. Онлайн-версия – это как раз то, что нужно в такой ситуации. Вдруг затянет? Вдруг раскроется талант, который только и ждал своего часа? Ответить на эти вопросы как раз таки и помогает виртуальное онлайн-пианино. Оно вдохновляет на занятия музыкой тех, кто делает первые шаги.
Не нужно знать, как правильно держать руки, как располагать пальцы на черных и белых клавишах, как читать ноты. Навыков не требуется вообще. Человек привыкает к соответствию клавиш на экране и кнопок на компьютере за несколько минут. Еще проще играть на планшете.
Онлайн пианино для развлечений или обучения?
Пианино онлайн отлично подходит, как для развлечений и игр, так и для обучения на фортепиано. Если у вас пока нет настоящего инструмента, а играть хочется уже сейчас, то наше онлайн пианино идеально вам подойдет. Вы можете играть любые произведения, от простых мелодий до сложных классических произведений. Мы постарались сделать онлайн фортепиано, которое отлично звучит и удобно в использовании для всех любителей музыки.
Ноты и клавиши
Блиц: быстро нажмите на клавишу с нотой Ля!
Готов поспорить, у вас это не вышло. Впечатление, что раз клавиши пианино расположены в порядке До Ре Ми Фа Соль Ля Си, то разобраться в них не стоит труда – это глубочайшее заблуждение. Про чёрные клавиши я и вовсе молчу! Расположение нот на клавишах
Посмотрите внимательно и запомните – это основы основ, которые вам нужно будет знать в первую очередь. Сыграйте ноты, называя их, со временем вы сможете мгновенно определить нахождение любой ноты, в будущем, когда вы начнете изучать аккорды, вы еще не раз скажете мне спасибо, что акцентировал ваше внимание на такой, казалось бы, легкотне.
Не бойтесь, я не забыл про чёрные клавиши, но тут понадобится уже небольшое вникание в теорию, но ведь нужно же с чего-то начинать?
На данном этапе вам уже необходимо знать понятие интервал. Интервалы – это разница между двумя звуками определённой высоты.
Описание и возможности
Перед тем как перейти к загрузке и установке программы, давайте рассмотрим, какие основные и дополнительные возможности она предлагает пользователю:
- Вместе с изображением клавиатуры пианино в программе показывается и клавиатура компьютера. Соответственно, использовать данный инструмент можно без подключения каких-либо дополнительных аксессуаров.
- Также отображается основная сопутствующая информация. Это ноты, которые вы набираете, ключ, смещение, динамика и выдержка.
- Когда пользователь нажимает одну из кнопок, она подсвечивается, таким образом давая понять, за какой звук отвечает.
- Любые композиции, которые вы сыграли, можно сохранить в аудиофайл.
- Присутствует большое количество настроек, позволяющих добавлять различные эффекты на производимый в режиме реального времени звук.
Чтобы не делать статью слишком большой, давайте сразу переходить к делу и разбираться, где скачать данную программу, а также как ее правильно установить.
— Interactive Songs —
Select a tonal center (tonic) and click on a scale name to show the corresponding notes on the piano:
A scale is a set of musical notes ordered as a well-defined sequence of intervals (tones and semitones). A semitone is the minimum distance between two consecutive notes in any tempered scale (12 equal semitones per octave). In other words, a semitone is also the distance between two consecutive keys on the piano. For example, the distance between C and C# (black key next to C), or the distance between E and F (both being white keys). However, the distance between C and D, for example, is a full tone (or two semitones).
Musical scales are an essential part of music improvisation and composition. Practicing scales will provide you with the necessary skills to play different styles of music like Jazz, Flamenco or Blues. You can also use scales to create your own melodies and set the mood of your piece.
Any chosen scale can be transported to any tonal center (e.g. E minor and A minor both use the same minor scale). The tonal center or tonic is the note where the scale hierarchy starts and it is represented on the virtual piano with a darker blue dot. When playing music under a particular scale, you should normally avoid any key without a blue dot, although composers sometimes use altered notes which are not within the scale.
Notes in a scale do not need to be played in a particular order, you can play them in any order you like, so feel free to improvise!
