Интерактивные модули на JS и React для изучения синтезаторостроения
Природа звука в браузере: источники звука и интерфейсы взаимодействия
Современные браузеры поддерживают веб-стандарт Web Audio API, благодаря которому мы можем синтезировать звук, проигрывать семплы и делать многое другое. В этом курсе мы будем работать с этим веб-стандартом с помощью библиотеки Tone.js, в которой реализованы возможности создавать синтезаторы, семплеры, писать мелодии (секвенции), управлять их воспроизведением, обрабатывать звук с помощью звуковых эффектов, и многое другое.
В браузере звук создаётся двумя способами. Звук можно синтезировать используя генератор сигналов (осциллятор). Либо можно проиграть аудио-файл (семпл) — это называется семплингом.
С помощью Web Audio API можно создать осциллятор, можно проиграть айдио-файл. Но на много удобнее воспользоваться библиотекой Tone.js, чтобы получить более богатый звук и различные возможности для написания мелодий и битов. На чистом JavaScript и Web Audio API нужно написать очень много кода, чтобы получить что-то приближенное к тому, что можно получить быстро и с небольшим объёмом кода на Tone.js.
Осциллятор через Web Audio API
Рассмотрим пример синтеза звука с использованием осциллятора на чистом JavaScript через Web Audio API. Мы создаём осциллятор и запускаем его с частотой 440Hz. С помощью слайдера мы можем управлять частотой осцилятора.
Синтезатор на Tone.js
В библиотеке Tone.js существует несколько видов инструментов. Среди них десять синтезаторов и один семплер. Для начала воспользуемся самым базовым синтезатором, который называется просто Synth.
Синтезатор в Tone.js — это осциллятор вместе с ещё одним устройством, которое называется генератор огибающей (envelope) или ADSR (от слов attack, decay, sustain, release).
Ещё один плюс, что в Tone.js можно указать ноту в нотной нотации, а не частату в герцах, и длительность воспроизведения, после которой нота перестанет звучать.
В следующем примере при нажатии на кнопку Play будет проиграна нота До четвёртой октавы (в английской нотации C4) в течение одной секунды.
Клавиатура фортепиано — самый знакомый интерфейс
Все видели и знают, как выглядит клавиатура у пианино и рояля, а те, кто ходил в детстве в музыкльную школу знают, где на клавиатуре какие ноты, что такое октавы и т. д.
Для наглядности нарисуем виртуальную клавиатуту фортепиано и будем тригерить синтезатор, чтобы проигрывался звук по нотам. Длительность звучания одна секунда.
Секвенсор — удобный интерфейс для написания зацикленных мелодий (лупов)
Все представленные модули могут использоваться для генерации кода для Tone.js, вы можете использовать их для создания секвенций для своих проектов.
Исходный код всего проекта доступен на GitHub. Используйте его для изучения возможностей работы с интерактивом на JS.
