простая таблица аккордов в тональности

Выделенные мной критерии удобства:

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

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

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

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

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

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

Для отрисовки аппликатур аккордов прекрасно подошёл HTML5 canvas, т.к. мне нужна была свободно масштабируемая аккордовая сетка.

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

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

И вот как я это сделал

легко переноситься с одной машины на другую

строить достаточно удобные гитарные аппликатуры аккордов

отображать аккорд на виртуальной синтезаторной клавиатуре

показывать схему аккорда

проигрывть выбранный аккорд

Да не простую мне хотелось табличку, а фичастую, чтобы она умела:

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

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

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