Рассмотрим возможности браузеров по синтезу звука. Разберём основы и в качестве практического применения сделаем эмулятор синтезатора Yamaha DX7.
Web Audio API
Браузеры позволяют вызывать из JavaScript объекты для управления и создания звука. Документация на русском: https://developer.mozilla.org/ru/docs/Web/API/Web_Audio_API
API предоставляет компоненты для создания и изменения аудио-сигнала. Причём сами компоненты можно соединять между собой, а их свойства менять по расписанию.
Hello World!
Рассмотрим простейший пример, нечто вроде стандартного “Hello World!” для языков программирования.
Код примера страницы HTML с поясняющими комментариями
<html><button onclick='start();'>beep</button> <!-- создаём на странице кнопку--><script>function start() {let audioContext = new AudioContext();//создаём главный объектlet when = audioContext.currentTime + 0.1;//время через 0.1сlet beep = audioContext.createOscillator();//осциллятор это объект который делает "Пи-и-и-и"beep.frequency.value = 440;//частота ноты Ляbeep.connect(audioContext.destination);//направляем звук в аудиовыходbeep.start(when);//запускаем звук в указанное времяbeep.stop(when + 1);//останавливаем через 1 секунду}</script></html>
Запускаем в браузере https://mzxbox.ru/fmsynth/beep.html и наслаждаемся бибиканием.
Огибающая звука
Если дёрнуть струну гитары или нажать клавишу пианино, можно заметить что естественный звук отличается от компьютерного. Клавиша звучит громче в момент нажатия и постепенно угасает со временем. В синтезеторах этот эффект достигается регулированием ADSR-огибающей:
Описание — https://ru.wikipedia.org/wiki/ADSR-огибающая
Расширим наш прошлый пример и добавим огибающую. Схема соединения компонентов:
Код примера с комментариями
<html><button onclick='start();'>beep AHDSR</button><script>function start() {let audioContext = new AudioContext();//создаём главный объектlet when = audioContext.currentTime + 0.1;//играть через 0.1с после нажатия кнопкиlet beep = audioContext.createOscillator();//осциллятор это объект который делает "Пи-и-и-и"let envelope = audioContext.createGain();//объект Gain это громкостьbeep.frequency.value = 440;//частота ноты Ляenvelope.gain.setValueAtTime(0, when);//в начале звучания громкость 0envelope.gain.linearRampToValueAtTime(1, when + 0.05);//постепенно увеличить до 1 за 0.5сenvelope.gain.linearRampToValueAtTime(0.5, when + 0.2);//понизить до 0.5 за 0.2сenvelope.gain.setValueAtTime(0.5, when + 0.99);//это нужно для правильно расчёта последнего значенияenvelope.gain.linearRampToValueAtTime(0, when + 1);//в конце звука понизить до 0envelope.connect(audioContext.destination);//"громкость" направляем в аудиовыходbeep.connect(envelope);//осциллятор направляем в "громкость"beep.start(when);beep.stop(when + 1);}</script></html>
Запускаем в браузере https://mzxbox.ru/fmsynth/envelope.html — звук без резких скачков, более громкий в начале и тихий в конце.
Модуляция звука
В модуляции звука сигнал-носитель (carrier) изменяется с помощью сигнала-изменятеля (modulator). Подробнее — https://ru.wikipedia.org/wiki/Модуляция
Амплитудная модуляция — вид модуляции, при которой изменяемым параметром несущего сигнала является его амплитуда.
Частотная модуляция — вид аналоговой модуляции, при которой модулирующий сигнал управляет частотой несущего колебания. По сравнению с амплитудной модуляцией здесь амплитуда остаётся постоянной.
Амплитуданя модуляция
Звук из модулятора направляется в свойство gain (громкость) узля Gain, на вход которого подключен носитель:
Код примера
<html><button onclick='start();'>Amplitude modulation</button><script>function start() {let audioContext = new AudioContext();let when = audioContext.currentTime + 0.1;let carrier = audioContext.createOscillator();let modulator = audioContext.createOscillator();let result = audioContext.createGain();let level = audioContext.createGain();carrier.frequency.value = 500;modulator.frequency.value = 4;level.gain.value = 0.5;//уменьшить амплитуду в 2 разаresult.gain.value = 0.5;//сместить волну на 0.5modulator.connect(level);level.connect(result.gain);carrier.connect(result);result.connect(audioContext.destination);carrier.start(when);modulator.start(when);carrier.stop(when + 2);modulator.stop(when + 2);}</script></html>
Осциллятор выдаёт синусоиду [-1; +1], а в конечном результате у нас громкость должны меняться как [0; +1] — поэтому нужны дополнительные преобразования.
Прослушать в браузере https://mzxbox.ru/fmsynth/amplitude.html
Частотная модуляция
Схема соединения узлов:
Код примера
<html><button onclick='start();'>frequency modulation</button><script>function start() {let audioContext = new AudioContext();let when = audioContext.currentTime + 0.1;let carrier = audioContext.createOscillator();let modulator = audioContext.createOscillator();let level = audioContext.createGain();modulator.frequency.value = 4;level.gain.value = 200;carrier.frequency.value = 300;carrier.connect(audioContext.destination);level.connect(carrier.frequency);modulator.connect(level);carrier.start(when);modulator.start(when);carrier.stop(when + 2);modulator.stop(when + 2);}</script></html>
прослушать в браузере https://mzxbox.ru/fmsynth/frequency.html
Фазовая модуляция
Фазовая модуляция сдвигает фазу сигнала, что добавляет в него обертоны и в результате меняет тембр. Подробнее — https://ru.wikipedia.org/wiki/Фазовая_модуляция
Схема соединения компонентов:
Код примера
<html><button onclick='start();'>phase modulation</button><script>function start() {let audioContext = new AudioContext();let when = audioContext.currentTime + 0.1;let soundFrequency = 500;//частота носителяlet maxmodulation = 4;let carrier = audioContext.createOscillator();let modulator = audioContext.createOscillator();let level = audioContext.createGain();let phaseDelay = audioContext.createDelay();carrier.frequency.value = soundFrequency;modulator.frequency.value = soundFrequency;level.gain.setValueAtTime(0, when);level.gain.linearRampToValueAtTime(maxmodulation / (2 * Math.PI * soundFrequency), when + 2);phaseDelay.delayTime.value = 0.5 / soundFrequency;//сдвиг пропорционально длине волныmodulator.connect(level);level.connect(phaseDelay.delayTime);carrier.connect(phaseDelay);phaseDelay.connect(audioContext.destination);modulator.start(when);carrier.start(when);modulator.stop(when + 2);carrier.stop(when + 2);}</script></html>
Прослушать в браузере https://mzxbox.ru/fmsynth/phase.html
AudioWorklet
Web Audio API предоставляет готовые компоненты для работы со звуком. Дополнительно есть компонент AudioWorkletProcessor, он позволяет писать собственный код DSP.
Подробнее — https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor
Вот код фазовой модуляции из предидущего примера, но уже через AudioWorkletProcessor
<html><button onclick='start();'>phase worklet</button><script>let phaseWorkletSource = `class PhaseSineAudioWorkletProcessor extends AudioWorkletProcessor {phase = 0;cntr = 0;constructor() {super();}static get parameterDescriptors() {return [{ name: "carrierFrequency", automationRate: "a-rate" }, { name: "modulationLevel", automationRate: "a-rate" }];}readSample(inputs, xx) {let inputSumm = 0;for (let ii = 0; ii < inputs.length; ii++) {let singleInput = inputs[ii];let channelCount = singleInput.length;if (channelCount) {let channelSumm = 0;for (let ch = 0; ch < singleInput.length; ch++) {let singleChannel = singleInput[ch];channelSumm = channelSumm + singleChannel[xx];}inputSumm = inputSumm + channelSumm / channelCount;}}return inputSumm;}writeSample(outputs, xx, value) {for (let oo = 0; oo < outputs.length; oo++) {let singleOutput = outputs[oo];for (let ch = 0; ch < singleOutput.length; ch++) {let singleChannel = singleOutput[ch];singleChannel[xx] = value;}}}process(inputs, outputs, parameters) {let outSampleCount = outputs[0][0].length;let frequency = parameters["carrierFrequency"][0];let modulationLevel = parameters["modulationLevel"][0];let incrementBySample = Math.PI * 2 * frequency / sampleRate;for (let xx = 0; xx < outSampleCount; xx++) {let inputSumm = this.readSample(inputs, xx);let resultValue = Math.sin(this.phase + modulationLevel * inputSumm);this.writeSample(outputs, xx, resultValue);this.phase = this.phase + incrementBySample;if (this.phase >= Math.PI * 2) {this.phase = this.phase - Math.PI * 2;}}return true;}}registerProcessor("sinePhaseModuleID", PhaseSineAudioWorkletProcessor);`;function loadAudioWorkletCode(audioworkletcode, audioContext, onDone) {let blob = new Blob([audioworkletcode], { type: 'application/javascript' });let reader = new FileReader();reader.onloadend = function () {let blobURL = reader.result;audioContext.audioWorklet.addModule(blobURL).then((vv) => {onDone();});}reader.readAsDataURL(blob);}function start() {let audioContext = new AudioContext();loadAudioWorkletCode(phaseWorkletSource, audioContext, () => {playSound(audioContext);});}function playSound(audioContext) {let when = audioContext.currentTime + 0.1;let soundFrequency = 500;let maxmodulation = 4;let carrier = new AudioWorkletNode(audioContext, 'sinePhaseModuleID');let modulatorBeep = audioContext.createOscillator();let volume = audioContext.createGain();volume.gain.value = 0;let descriptors = carrier.parameters;let carrierFrequency = descriptors.get('carrierFrequency');let modulationLevel = descriptors.get('modulationLevel');carrierFrequency.value = soundFrequency;modulatorBeep.frequency.value = soundFrequency;modulationLevel.setValueAtTime(0, when);modulationLevel.linearRampToValueAtTime(maxmodulation, when + 2);volume.connect(audioContext.destination);carrier.connect(volume);modulatorBeep.connect(carrier);modulatorBeep.start(when);volume.gain.setValueAtTime(1, when);volume.gain.setValueAtTime(0, when + 2);}</script></html>
Прослушать в браузере https://mzxbox.ru/fmsynth/phaseworklet.html
Можно заметить что результат по звучанию ничем не отличается, но кода получилась огромное полотенце.
Такой подход имеет смысл использовать только если нужно перекомпилировать C++ код плагина VST в WebAssembly ( https://ru.wikipedia.org/wiki/WebAssembly ) для запуска его в браузере.
Практическое применение
После прочитанного может возникнуть вопрос: “А зачем использовать FM-синтез в браузере?”
Ответ: “Чтоб делать музыкальные синтезаторы, конечно же!”
В десктопных DAW (Ableton Live, FL Studio и т.п.) есть поддержка API для плагинов (см. https://ru.wikipedia.org/wiki/Virtual_Studio_Technology ). Любой может написать свой собственный электронный инструмент который будет работать в любой DAW или секвенсоре.
В современной музыке значение плагинов настолько велико, что новички спрашивают не “Какой редактор использовать для музыки в стиле ХХХ?”, а “Какой плагин мне купить для музыки в стиле ХХХ?”
В онлайне всё значительно хуже. Даже Bandlab (30 млн пользователей) не имеет API для расширения своей студии сторонними плагинами.
Сейчас я работаю над онлайн-секвенсором который реализует собственный API для плагинов. Релиз ещё не близко, но попробовать можно уже сейчас.
Эмуляция Yamaha DX7
Yamaha DX7 — цифровой синтезатор, выпущенный фирмой Yamaha в 1983 году. Был очень популярен в 1980-е годы, и, преимущественно из-за низкой стоимости и компактности, стал одной из наиболее продаваемых моделей за всю историю существования синтезаторов — https://ru.wikipedia.org/wiki/Yamaha_DX7
Посмотреть работу плагина можно здесь:
https://rutube.ru/video/69cec43733da30418e9d56bd5225303c/
Благодаря использованию Web Audio API код плагина получился значительно компактней имеющихся VST-реализаций.
Текст получается слишком большой, поэтому разбора кода и синтеза звука в DX7 будет рассмотрен во второй части статьи.
ссылка на оригинал статьи https://habr.com/ru/articles/1052640/