Генерируем простую музыку в браузере с Web Audio API

Доброго времени суток, уважаемые читатели!

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

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

Что будем играть?

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

Постановка задачи

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

1. Заполучить отдельные, желательно качественно записанные звуки инструментов.
2. Ознакомиться с интерфейсом, который позволит запланировать и выполнить очередь из воспроизводимых звуков.
3. Реализовать алгоритмы, которые размещают звуки инструментов в очередь таким образом, чтобы их воспроизведение соответствовало нашим ожиданиям.

Отдельные звуки

Первым делом нам нужны звуки, которые мы будем комбинировать в музыку. В нашем случае это звуки барабанов и электрогитар. Нагуглить первые не составит никакого труда, так как готовые звуки барабанов повсеместно используются в сведении треков. С гитарой сложнее: либо пишем сами, либо с помощью любого редактора звуков (например, бесплатный Audacity ^[1]) извлекаем из какой-либо песни аккорд. Я сделал второе: плюс такого подхода в том, что кроме гитары мы имеем во фрагменте готовый басовый фон, и при прослушивании в наушниках это даёт о себе знать.

API работы со звуком в браузере

Интерфейс, который позволяет работать со звуками в большинстве современных браузеров, называется Web Audio API. Мне посчастливилось найти набор примеров ^[2], среди которых есть и планирование воспроизведения нескольких звуков согласно музыкальному размеру. Это, можно сказать, готовое полотно, на котором только нужно начертить схему наших звуков — и дело в шляпе. В таком случае, не упоминая нюансы самого API, можно переходить к главной теме:

Из чего будет состоять музыка

Чтобы послушать настоящие брейкдауны, нам нужно скомбинировать:

• Бас-бочку (кардан)
• Малый барабан
• Тарелки
• Электрогитару

Игра на бас-бочке является важным аспектом в хардкоре: вместе с бас-гитарой она делает фон песни. Она сводится к постоянным очередям ударов, темп и ритмический рисунок которых может меняться. Скажем так: партия на кардане напоминает перестрелку. Малый барабан присутствует во всех жанрах рока, и его всегда слышно по резкому звуку со щелчком. Быстрый уличный панк-рок, военный марш — это всё он. Такая классика, как тарелки, конечно, даже не обсуждается, а электрогитару у нас будут представлять два перегруженных звука — приглушенный аккорд и открытая струна (что, как выяснится, беспроигрышная комбинация).

Определяем алгоритмы звучания инструментов

В примере очень простым образом реализовано планирование воспроизведения. Такт там разделен на 8 частей — оставим как есть.

Планировать воспроизведение кардана программа будет следующим образом:

1. Разделим такт на случайное количество случайных слагаемых. Каждый раз это будет новым набором чисел. Например, если на выходе мы получим слагаемые 3, 3 и 2, время такта будет выглядеть следующим образом:
   

2. Мы получили набор отрезков времени в такте. Каждому отрезку времени присвоим случайное количество ударов карданом:
   

3. Допустим, темп композиции такой, что такт длится 8 секунд. Получаем, что за первые 3 секунды мы услышим 4 удара, далее будет один удар, и в последние 2 секунды еще два.

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

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

Так как кардан и малый барабан у нас случайны, роль поддержания ритма сыграют именно тарелки. Они случайны только отчасти. Например, в первой и пятой части такта тарелки воспроизводятся гарантировано, а в остальных — случайно. Получаем следующую схему:

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

А можно послушать?

Моя реализация генератора брейкдаунов на JavaScript находится здесь ^[3].

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

Спасибо за внимание!

Автор: IlyaTereschuk

Источник ^[5]