Как стать автором
Обновить

Практическое использование автогенерации музыки

JavaScriptРазработка под AndroidЗвук

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

В данной статье описывается реализация авто-аккомпанимента для аккордовых прогрессий.

Идея

Сделать возможность подобрать и прослушать звучание аккордов в разных стилях. Работать все должно просто, желательно поменьше кнопок и пунктов меню.

Реализация

Как выглядит веб-версия можно посмотреть здесь:

Как видно, кнопок достаточно много, но гораздо меньше чем у подобных программ.

Сделано всё на JavaScript, поэтому хорошо работает как в браузере, так и в Android-приложениее собранном с Cordova.

Автогенерация

Автогенерации музыки несколько сотен лет (см. https://ru.wikipedia.org/wiki/Музыкальная_игра_в_кости ). Обычно используются наборы паттернов (рифов или музыкальных фраз) которые транспонируют под выбранные тональности.

Для воспроизведения используются 4 стандартные в современной музыке линии:

  • Drums - барабаны, задают ритм

  • Bass - басовая линия

  • Lead - мелодия или рифы

  • Pad - долгие звуки (контрапункт) для окраски аккордов

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

Кроме того, есть особые требования к рифам - они должны хорошо играть в разных вариациях. Например нет никаких технических препятствий для добавления гитарных рифов из Metallica, но они слищком специфичный и в большинстве прогрессий будут звучать плохо.

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

Звук

Сервис для музыки должен хорошо воспроизводить музыку, что естественно.

В программе использовался этот набор сэмплов. Он содержит сотни инструментов, есть 10-ти полосный эквалайзер, ревербератор, динамический компрессор. Всё работает из JavaScript в любом браузере и не требовательно к ресурсам.

При первом старте может играть с лагами т.к. инструментов относительно много и они кешируются несколько почти минуту.

UX/UI

На главном окне всего 4 кнопки по которым можно менять генерируемые паттерны в прогрессии. Тапнуть - выбрать случайный паттерн, повернуть - выбрать какой-то конкретный фрагмент.

Слайдером можно выбрать одну из готовых прогрессий.

По кнопке с шестеренкой можно открыть окно с настройками (громкость, темп, редактирвоание отдельных аккордов и т.п.):

Выглядит всё достаточно лаконично, но не в ущерб функциональности.

Импорт

По кнопке [Аа] можно вставить собственную прогрессию. Например скопировать из учебника или со страницы сайта.

Однозначного стандарта на запись аккордов нет, придется парсить различные варианты. Примеры записи

  • Am—Bdim—C—Dm—Em—F—G

  • vi - IV - I - V

Кроме того, в примерах аккордовых прогрессий могут использоваться различный спец.символы.

Экспорт

Как и в большинстве музыкальных программ, поддерживается экспорт в файл MIDI.

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

Для корректного отображения превью поддерживается протоколы Open Graph и Twitter Cards.

Результат

Веб-версию можно запустить здесь

Приложение для Android доступно здесь

P.S.

Если есть какие-то вопросы по генерации или Web Audio API - можно спрашивать в комментариях.

Теги:музыкаjavascriptweb audio apicordovaзвукaudio
Хабы: JavaScript Разработка под Android Звук
Всего голосов 6: ↑6 и ↓0 +6
Просмотры3K

Похожие публикации

JavaScript Developer
от 2 700 €DiscoМожно удаленно
JavaScript Frontend React Developer
от 60 000 до 100 000 ₽АдаптакиМожно удаленно
JavaScript разработчик
от 180 000 ₽SportrecsМоскваМожно удаленно
JavaScript-разработчик
до 180 000 ₽MobilityРязань
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква

Лучшие публикации за сутки