Природа звука в браузере: источники звука и интерфейсы взаимодействия
Современные браузеры поддерживают веб-стандарт 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
Добавить семплер, как синтезатор выше с одним семплом
Клавиатура фортепиано — самый знакомый интерфейс
Все видели и знают, как выглядит клавиатура у пианино и рояля, а те, кто ходил в детстве в музыкльную школу знают, где на клавиатуре какие ноты, что такое октавы и т.д.
Для наглядности нарисуем виртуальную клавиатуту фортепиано и будем тригерить синтезатор, чтобы проигрывался звук по нотам. Длительность звучания одна секунда.
Клавиатура компьютера — доступный интерфейс для управления звуком
Здесь будет текст :)