Реализация осциллятора звуковой волны простой синусоидальной формы в качестве примера работы Web Audio API. осциллятор генерирует звуковую волну в частотном диапазоне от 0 до 20000 Гц.
Создадим простую страницу с двумя input. Можно обойтись одним из двух, но для большего удобства я оставил оба. Один будет в виде ползунка, чтобы можно было легко менять частоты. И второй input в виде простого текстового поля, чтобы можно было видеть значение частоты и более точно выбрать нужную.
Обоим элементам будет задан обработчик событий onchange, что позволит после изменения значения сразу менять частоту звука. А ползунку так же задан обработчик собыития oninput, что позволит моментально менять частоту звука при перемещении ползунка, иначе бы нам приходилось отпустить ползунок для изменения частоты.
|
1 2 3 |
<input id="frequency" type="range" min=0 max=20000 value=140 onchange="changeFrequency()" oninput="changeFrequency()"> <br> <input id="frequency2" type="number" onchange="changeFrequency2()"> |
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.