Ovation. Таблица аккордов своими руками с помощью JS и HTML5

Идея


Задался я как-то целью слепить свою собственную вебовую табличку аккордов с целью рассказать человеку, с чем эти самые аккорды едят.

Да не простую мне хотелось табличку, а фичастую, чтобы она умела:
  • проигрывть выбранный аккорд
  • показывать схему аккорда
  • отображать аккорд на виртуальной синтезаторной клавиатуре
  • строить достаточно удобные гитарные аппликатуры аккордов
  • легко переноситься с одной машины на другую
И вот как я это сделал…

Средства


В силу последнего пункта плана задуманных возможностей я решил, что всё целиком буду делать с помощью JavaScript.
Для вывода звука я использовал HTML5 audio как наиболее перспективную технологию. Проще говоря, мне совсем не улыбалось возиться с интеграцией Flash, к которому я, будучи любителем OpenSource, всегда относился с некоторым подозрением.
Для отрисовки аппликатур аккордов прекрасно подошёл HTML5 canvas, т.к. мне нужна была свободно масштабируемая аккордовая сетка.

Реализация


Первым делом была слеплена простая виртуальная клавиатура. Клавиши представляют из себя множество div-ов с событиями onClick, слайдер сделан средствами jQuery-UI.

клавиатура

Затем была добавлена, собственно, таблица аккордов, проигрыватель простых мелодий (мелодии пишутся как множество нот и задержек между ними в миллисекундах), просмотрщик гитарных аппликатур.

Проблемы и решения


Звук

Как это всегда бывает, с первыми успехами в работе над проектом появились и первые проблемы. Изначально проигрывание аккордов было сделано очень просто: при загрузке страницы JS генерировал 49 элементов audio — по одному на каждую клавишу синтезатора, каждой привязывался соответствующий звуковой фрагмент. И всё бы хорошо, вот только, как выяснилось, ни Chrome, ни Opera не смогли переварить 49 открытых аудиопотоков, некоторые ноты просто съедались. Проблему я решил очень просто: ограничил число элементов audio до 8, причём нагрузку на них распределил по round-robin. Очевидный недостаток такой схемы — необходимость смены источников(source) у элементов audio. Да, на локальной машине это не проблема, но вот подгрузка звуковых файлов с сервера совсем не мгновенна. Дабы свести подобного рода задержки к минимуму я использовал предзагрузку аудиофайлов в кэш браузера. Сделано это очень просто. Создаётся дополнительный элемент audio, которому последовательно передаются все звуковые файлы, которые будут использоваться клавиатурой. Задержки, конечно, остались, но они уже вполне терпимы.

Аппликатуры гитарных аккордов

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

Выделенные мной критерии удобства:
  • «Длина» аккорда. Количество ладов, которые аккорд занимает на грифе гитары. Здесь очевидный предел — 5 ладов, дальше дотянуться очень проблематично.
  • «Ширина» аккорда. Расстояние между самой высокой и самой низкой зажатой струной. Начинающим куда тяжелее даются аккорды, которые затрагивают гриф по всей ширине, включая аккорды на баррэ. Это стоит учитывать.
  • Количество пальцев для зажатия струн. Очень важный параметр. Простой аккорд скорее состоит всего из пары-тройки зажатых струн. Исключением могут выступать аккорды на баррэ, поэтому для них я задал фиксированное небольшое увеличение сложности, а баррэ считаю одним пальцем. Максимальное количество используемых пальцев было задано равным 4 в силу того, что большой палец левой руки используется далеко не всеми гитаристами.
  • Количество не играющих струн. Даёт небольшой вклад в сложность аккорда, т.к. новичкам трудно попадать по конкретной части грифа.
  • Количество одиночных не играющих струн (кроме 1 и 6). Этот параметр намного важнее предыдущего. Следить за приглушением отдельных нот внутри аккорда куда сложнее, чем за приглушением, например, 6 струны, или даже 6,5 и 4 струн вместе.
  • Расположение аккорда на грифе. По возможности будем выдавать аккорды в открытой позиции.
Всё это было доблестно вписано в одну формулу, которая и выбирает для моей таблицы самые подходящие аппликатуры гитарных аккордов. Сгенерированные скриптом аппликатуры аккорда C:
аппликатуры гитарных аккордов
Подбор аппликатур до сих пор может немного замедлять работу приложения, т.к. происходит полный перебор нот аккорда по струнам. Проблема стоит не очень остро по той причине, что подбор происходит в отдельном потоке посредством Web Workers.

Результаты


В результате я получил удобное средство нахождения и построения аккордов, поиска подходящих аппликатур, которое не стыдно показать вышеобозначенному человеку. Код проекта доступен на github.com под лицензией CC BY-NC-SA 3.0. Буду благодарен за любую помощь с проектом, будь то ценный совет или готовый патч.
Попробовать код в работе можно прямо на github: демо.
Поделиться публикацией

Комментарии 49

    +5
    Вообще. Что те кто придумал стандарт html5 audio, что те, кто делал его реализации — мудаки редкостные, что печально безумно.
    В качестве маленького проигрывателя песен на страничках он может и подходит, но всё, что выходит за этот узкий юзкейс — совершенно неюзабельно.
      +3
      А приложение из топика — айсовое. Хотя и огорчает лёгкая задержка проигрывания.
        0
        Хорошо, что хоть такие средства у нас появились. Я надеюсь, их ещё допилят.
          0
          Ну с этим спорить сложно)
          0
          есть же вполне годное html5 webaudio, правда только для хрома пока что, и под линуксом не завелось =\
        0
        Весьма мило!
          0
          Мне понравилось, и задержки в проигрывании нет.
          А аккорды sus2 и add9 здесь представлены? Т.е. может быть они есть под другими названиями? Не силен в теории, поэтому и спрашиваю.
          Для гитары было бы здорово, если сначала шли наиболее часто используемые аккорды — хотя бы 2-3.
            0
            Нет, эти аккорды не представлены, но в эту таблицу их очень легко добавить. Для гитары я старался отображать слева самые простые аппликатуры (хотя и не всегда наиболее частоиспользуемые).
              0
              Добавил аккорд Xsus2 в таблицу. Аккорды Xadd9 добавлять не стал, т.к. таблица уже достаточно большая. Но вы можете получить их самостоятельно, выбрав аккорд X9 и сняв предпоследнюю ноту.
              0
              Задержки существенные, мешают =(
              FF14/MacOSX

              По сути: супер! Надо бы добавить ссылку с моего сайта с аккордами =)
              Фич-реквест: опознавание аккорда по аппликатуре (в довесок к «по нотам на клавиатуре»).
                +2
                Здоровский фич-реквест, буду пилить.
                  +1
                  Сделал простое редактирование аппликатуры (пока что не очень удобное). Теперь занимаюсь улучшением распознавания аккордов.
                  0
                  Mozilla Firefox 14.0.1, Fedora. Не работает. Виден только каркас синтезатора
                    0
                    Проверьте, пожалуйста, чтобы на вашей стороне ничего его не блокировало: noscript, adblock и пр. Я проверял на FF в своей мандриве. Подтормаживает сильнее, чем в хроме, но работает. Надо посмотреть, какой у меня фокс, может быть, от версии зависит.
                      0
                      Хм… Если не ошибаюсь, никаких блокирующих плагинов у браузера нет. Проверил.
                    0
                    Посоветовал сестре, которая учится в музыкальной.
                    По этому поводу можно было бы включить «разрешения» аккордов относительно выбранной тональности. (вот, вроде, есть практически все clck.ru/1Kj9f)
                      0
                      ОК, отсюда вытекает необходимость определения аккордов с изменённой линией баса и обращений. Записал в список фич на будущее.
                      0
                      Эх, для бас-гитары бы такое, очень бы мне пригодилось :)
                        +1
                        Не скажу, что это неподъёмная задача, нужно в коде заменить обработку и отрисовку конкретного жёстко забитого гитарного строя на произвольный. Только тогда уж надо делать не только 4-струнный бас, а список струнных инструментов и строёв. В общем получается уже серьёзная задачка.
                        0
                        Замечание: лады должны обозначаться римскими цифрами, а не арабскими
                          +1
                          Спаибо большое! Мне как улекающемуся игрой на гитаре очень полезная штука. Вы молодец!
                            +2
                            Клевая штука, мне нравится.

                            Фича риквест:
                            а) по нажатым струнам определять аккорд
                            б) возможность красиво распечатать выбранные аккорды
                              0
                              Добавил кнопочку для печати аппликатур текущего выбранного аккорда.
                                0
                                Вижу, спасибо.
                              0
                              А может генерить звук через Audio Data API?
                                +1
                                Это который Mozilla Audio Data API? Если его будет поддерживать кто-то, кроме, Firefox, то, конечно, имело бы смысл перейти. А так разве что только для Firefox его прикрутить попробовать в качестве костылика.
                                0
                                Очень круто и интересно! Спасибо!
                                  0
                                  сразу заметил музыкальные баги (просто нечаянно тыкнул в аккорд и он оказался неверным):
                                  Аккорды Xsus4 — это аккорды у которых 3 ступень заменена на 4. Т.е. они не могут буть мажорные или минорные, т.к. именно третья ступень определяет мажорность или минорность.
                                  т.е. схема аккорда 1-4-5
                                    0
                                    В гитарной практике нота, добавленная к основному аккорду, означает именно ноту, джоьбавленную к основному аккорду
                                    Аккорды X6(Xm6) 1-3-5-6
                                      0
                                      О, спасибо, не заметил. Я скопировал формулы аккордов с таблицы на одном из сайтов, не думал, что там может быть ошибка. Завтра всё исправлю и перепроверю вручную. Сегодня просто у меня уже глубоко за полночь. Ещё раз спасибо.
                                        0
                                        ну и стандартная бага (да и не бага в принципе, раз не в ручную забиваются) — аппликатуры аккордов искусственны, некоторые никогда вообще не употребляются
                                        0
                                        Баги исправил.
                                          0
                                          да, все четко!
                                        0
                                        Вот неплохой пример реализации клавиш синтезатора без использования изображений piano.lookformp3.net
                                        (не реклама)
                                          0
                                          Эх, всегда меня интересовала эта тема, жаль только музыкального образования нету… Ребят, кто умеет, сварганьте мелодию для этого приложения — интересно послушать!
                                          0
                                          Спасибо Вам огромное за эту реализацию — разучивание аккордов стало легким как никогда!!! (при условии если ноты не выучил)

                                          Есть проблемка. На айпаде, очень долго подгружаются аудио потоки — примерно 5-6 секунд.
                                            0
                                            Да, я знаю про эту проблему. Сейчас как раз ищу обходные пути, чтобы уменьшить задержки.
                                            0
                                            При должной сноровке на редакторе аппликатуры можно неплохо играть.
                                            С такими струнами даже банальное Em -> E -> F -> Am пострунно звучит торжественно и очень неплохо.
                                              0
                                              Нашел один глюк
                                              Выбираю аккорд A7 из таблицы — отображается доминантсептаккорд A7, и клавиши подсвечены. Все правильно.
                                              Теперь выбираю тот же самый аккорд заново на грифе. Теперь он — неизвестный аккорд, и клавиши подсвечены уже другие — аж на 3 октавы растянуты.
                                                0
                                                Это не глюк. Гитарный аккорд и так выглядит растянутым. Я предупреждал, что пока не все гитарные аккорды определяются, над этим работаю.
                                                  0
                                                  Хотя да, если брать именно те ноты, которые мы зажимаем на гитаре, то клавиши как раз правильно подсвечиваются. :)
                                                0
                                                Этой штуке цены не будет, когда она научится показывать аппликатуры в нестандартных настройках (всякие DADGAd, CGDFAd, EAEEBe и прочие).
                                                  0
                                                  Я посмотрю, что можно сделать.
                                                  +1
                                                  Хотелось бы биндинг клавиш [physical comp keyboard] <---> [virtual piano keyboard].
                                                  Тогда точно огонь будет!
                                                    0
                                                    очень круто! Пару лет назад пробовал писать генератор аккордов — не осилил. А у вас прям довольно хорошие аппликатуры генерирует и кода мало. Здорово!

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

                                                    Самое читаемое