Идея Я как-то задался целью создать свою веб-таблицу аккордов с целью рассказать человеку, с чем используются эти самые аккорды.
Да, я хотел не простой знак, а функциональный, чтобы он мог:
- сыграть выбранный аккорд
- показать диаграмму аккордов
- отображать аккорд на виртуальной синтезаторной клавиатуре
- построить довольно удобные аппликатуры гитарных аккордов
- легко переносить с одной машины на другую
Удобства
В связи с последним пунктом плана задуманных возможностей я решил, что буду делать всё полностью с помощью JavaScript. Для вывода звука я использовал аудио HTML5 как наиболее перспективную технологию.Проще говоря, мне совсем не нравилось возиться с интеграцией Flash, к которой я, как любитель OpenSource, всегда относился с некоторым подозрением.
HTML5-холст идеально подходит для рисования аппликатур аккордов, потому что.
мне нужна была свободно масштабируемая сетка аккордов.
Выполнение
Первым шагом было создание простой виртуальной клавиатуры.
Ключи представляют собой множество div с событиями onClick, слайдер сделан с использованием jQuery-UI. 
Потом, собственно, добавилась таблица аккордов, проигрыватель простых мелодий (мелодии пишутся как можно больше нот и задержки между ними в миллисекундах), а также просмотрщик гитарных аппликатур.
Проблемы и решения
Звук
Как всегда бывает, с первыми успехами в работе над проектом появились и первые проблемы.Изначально проигрывание аккордов было сделано очень просто: при загрузке страницы JS генерировал 49 аудиоэлементов — по одному на каждую клавишу синтезатора, к каждому привязывался соответствующий звуковой фрагмент. И всё бы ничего, но, как оказалось, ни Chrome, ни Opera не смогли переварить 49 открытых аудиопотоков, некоторые ноты просто съедались.
Я решил проблему очень просто: ограничил количество аудиоэлементов до 8, а нагрузку на них распределил по циклическому принципу.
Очевидным недостатком этой схемы является необходимость смены источников аудиоэлементов.
Да, на локальной машине это не проблема, но загрузка звуковых файлов с сервера происходит совсем не мгновенно.
Чтобы свести такого рода задержки к минимуму, я использовал предварительную загрузку аудиофайлов в кеш браузера.
Это делается очень просто.
Создается дополнительный аудиоэлемент, в который последовательно передаются все звуковые файлы, которые будут использоваться клавиатурой.
Задержки, конечно, остаются, но они уже вполне терпимые.
Аппликатура гитарных аккордов
Еще одной большой проблемой для меня была аппликатура гитары.И тут дело даже не в красивой прорисовке аккордовой сетки, которая скорее утомительна, чем сложна.
Это вопрос выбора комфортный аппликатуры.
Критерии удобства, которые я выделил:
- «Длина» аккорда.
Количество ладов, которые аккорд занимает на грифе гитары.
Очевидный предел здесь — 5 ладов; дойти дальше очень проблематично.
- «Ширина» аккорда.
Расстояние между самой высокой и самой нижней натянутой струной.
Новичкам гораздо сложнее играть с аккордами, касающимися всей ширины грифа, включая аккорды с барре.
Это стоит учитывать.
- Количество пальцев для зажима струн.
Очень важный параметр.
Простой аккорд, скорее всего, состоит из пары зажатых струн.
Исключением могут быть баррэ-аккорды, поэтому для них я устанавливаю фиксированное небольшое увеличение сложности и считаю барре одним пальцем.
Максимальное количество используемых пальцев было установлено равным 4 из-за того, что не все гитаристы используют большой палец левой руки.
- Количество неиграющих струн.
Вносит небольшой вклад в сложность аккорда, поскольку новичкам сложно ударить по определенной части грифа.
- Количество одиночных неиграющих струн (кроме 1 и 6).
Этот параметр гораздо важнее предыдущего.
Контролировать приглушение отдельных нот внутри аккорда гораздо сложнее, чем приглушение, например, 6 струн или даже 6,5 и 4 струн вместе.
- Расположение аккорда на грифе.
Если есть возможность, мы будем играть аккорды в открытой позиции.
Аппликатуры аккорда C, сгенерированные сценарием: 
Выбор аппликатур все же может немного замедлить работу приложения, потому что.
Идет полный перебор нот аккорда по струнам.
Проблема стоит не очень остро по той причине, что отбор происходит в отдельном потоке с помощью Web Workers.
Результаты
В результате я получил удобное средство поиска и построения аккордов, поиска подходящих аппликатур, которые мне не стыдно показать вышеназванному человеку.Код проекта доступен по адресу github.com по лицензии CC BY-NC-SA 3.0 .
Буду благодарен за любую помощь по проекту, будь то ценный совет или готовый патч.
Вы можете попробовать код в действии прямо на github: демо .
Теги: #JavaScript #музыка #аккорды #html5 #аудио #JavaScript #HTML
-
Как Рассмотреть Домены Для Веб-Сайта
19 Oct, 24 -
Отзывы О Бонусах Fusion Hq
19 Oct, 24 -
Вот Мой Файлообменник «Прижатый К Ногтю»
19 Oct, 24 -
Белый И Всезнайка
19 Oct, 24
