Простой генератор осциллятор звуковой волны на javascript и html5

Реализация осциллятора звуковой волны простой синусоидальной формы в качестве примера работы Web Audio API. осциллятор генерирует звуковую волну в частотном диапазоне от 0 до 20000 Гц.

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

Обоим элементам будет задан обработчик событий onchange, что позволит после изменения значения сразу менять частоту звука. А ползунку так же задан обработчик собыития oninput, что позволит моментально менять частоту звука при перемещении ползунка, иначе бы нам приходилось отпустить ползунок для изменения частоты.

window.AudioContext — это собственно контекст. который работает со звуком.

чтобы начать с ним работать, нужно создать свой контекст: context = new AudioContext();

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

var oscillator = context.createOscillator();

oscillator.frequency.value — задаем значение частоты.

oscillator.connect(context.destination); — указываем, что сгенерированный звук нужно направить в контекст по нужному нам назначению, в свою очередь в контектсе мы можем изменить назначение, по умолчанию назначение установлено в вывод на колонки/наушники, но можно создать трансляцию в сеть или в иное направление.

oscillator.start(); запускаем генерацию

В обработчиках события просто присваиваем новое значение частоты осциллятора.

Ниже рабочий код. после запуска начнет издавать звук, поэтому аккуратней с громкостью колонок 😉

See the Pen simple oscillator by Loktev Roman (@loktevra) on CodePen.

(Просмотров всего: 1 261, просмотров сегодня: 1)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.