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

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

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

Что будем играть? Если Вы любитель современного рока и отчасти такого его ответвления как хардкор, Вы наверняка знаете, что во всех производных этого жанра есть такое явление, как брейкдауны — простые проигрышы на одном и том же аккорде, которые, однако, во всех произведениях разные: темп композиции, барабанные партии и сами последовательности аккорда делают их уникальными. Этот вариант довольно простой и в то же время предоставляет огромное поле для манёвра.Постановка задачи Разберёмся, что нам необходимо для того, чтобы сделать скрипт, генерующий случайные брейкдауны.Шаги, которые нужно предпринять для реализации задачи, выглядят следующим образом: Заполучить отдельные, желательно качественно записанные звуки инструментов. Ознакомиться с интерфейсом, который позволит запланировать и выполнить очередь из воспроизводимых звуков. Реализовать алгоритмы, которые размещают звуки инструментов в очередь таким образом, чтобы их воспроизведение соответствовало нашим ожиданиям. Отдельные звуки Первым делом нам нужны звуки, которые мы будем комбинировать в музыку. В нашем случае это звуки барабанов и электрогитар. Нагуглить первые не составит никакого труда, так как готовые звуки барабанов повсеместно используются в сведении треков. С гитарой сложнее: либо пишем сами, либо с помощью любого редактора звуков (например, бесплатный Audacity) извлекаем из какой-либо песни аккорд. Я сделал второе: плюс такого подхода в том, что кроме гитары мы имеем во фрагменте готовый басовый фон, и при прослушивании в наушниках это даёт о себе знать.API работы со звуком в браузере Интерфейс, который позволяет работать со звуками в большинстве современных браузеров, называется Web Audio API. Мне посчастливилось найти набор примеров, среди которых есть и планирование воспроизведения нескольких звуков согласно музыкальному размеру. Это, можно сказать, готовое полотно, на котором только нужно начертить схему наших звуков — и дело в шляпе. В таком случае, не упоминая нюансы самого API, можно переходить к главной теме: Из чего будет состоять музыка Чтобы послушать настоящие брейкдауны, нам нужно скомбинировать: Бас-бочку (кардан) Малый барабан Тарелки Электрогитару Игра на бас-бочке является важным аспектом в хардкоре: вместе с бас-гитарой она делает фон песни. Она сводится к постоянным очередям ударов, темп и ритмический рисунок которых может меняться. Скажем так: партия на кардане напоминает перестрелку. Малый барабан присутствует во всех жанрах рока, и его всегда слышно по резкому звуку со щелчком. Быстрый уличный панк-рок, военный марш — это всё он. Такая классика, как тарелки, конечно, даже не обсуждается, а электрогитару у нас будут представлять два перегруженных звука — приглушенный аккорд и открытая струна (что, как выяснится, беспроигрышная комбинация).Определяем алгоритмы звучания инструментов В примере очень простым образом реализовано планирование воспроизведения. Такт там разделен на 8 частей — оставим как есть.Планировать воспроизведение кардана программа будет следующим образом:

Разделим такт на случайное количество случайных слагаемых. Каждый раз это будет новым набором чисел. Например, если на выходе мы получим слагаемые 3, 3 и 2, время такта будет выглядеть следующим образом: fe40fc5224a74b449bcff28741e2f511.png Мы получили набор отрезков времени в такте. Каждому отрезку времени присвоим случайное количество ударов карданом: a33d4639124144d0b8eb0de98b3c1006.png Допустим, темп композиции такой, что такт длится 8 секунд. Получаем, что за первые 3 секунды мы услышим 4 удара, далее будет один удар, и в последние 2 секунды еще два. Как по мне, это отличный способ сделать кардан хаотичным подобно тому, как он звучит в хардкоре.Малый барабан после долгих раздумий было решено проигрывать в каждой части такта случайно. Таким образом мы можем услышать как одиночные удары, так и бластбиты по 8 ударов подрят — либо не услышать вовсе:

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

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

А можно послушать? Моя реализация генератора брейкдаунов на JavaScript находится здесь.Также, разумеется, Вы можете просмотреть его исходный код с комментариями на русском языке, в котором реализованы указанные алгоритмы.

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

© Habrahabr.ru