Как энтузиаст музыкального и аудиопроизводства в течение последних 10 лет я был свидетелем роста влияния технологий на музыку. Удивительно, как технологии сделали аудио производство и обработку аудио более доступными. Не так давно все нужно было делать в полностью аналоговой студии звукозаписи, оснащенной дорогим редким оборудованием.
С введением DAW большинство шагов можно было бы делать везде, где у артистов есть доступ к компьютеру и паре наушников, хотя вы могли бы придумать это и потратить столько же, сколько студия, но идея состоит в том, чтобы сосредоточить внимание на производстве музыки на творческая часть, сделав ее более доступной по цене.
Переход от аналогового к цифровому формату не только упростил работу художников и продюсеров, но и изменил присутствие звука в браузерах. Раньше это было так же просто, как использование тега HTML ‹audio›, который имел множество ограничений, но с такими инструментами, как Web Audio API обработка звука сделала огромный шаг вперед.
Вместо того, чтобы просто воспроизводить звук в браузере, Web Audio API позволяет нам вводить различные аудиоисточники или входы, обрабатывать входной сигнал и выбирать место назначения или выход. Вдобавок ко всему, он обеспечивает визуализацию, которая сама по себе является еще одним интересным миром, и я отведу вас туда тоже, но в моих будущих блогах.
Если вам не надоедает такое длинное вступление, давайте лучше познакомимся с API веб-аудио и изучим некоторые основные концепции.
API веб-аудио обрабатывает аудио-операции внутри аудио-контекста. Он был разработан с модульной маршрутизацией. Это означает, что основные операции со звуком выполняются с помощью звуковых узлов, которые связаны вместе, чтобы сформировать граф маршрутизации звука. Модульная конструкция дает возможность создавать сложные потоки аудиосигналов.
// Create web audio api context const audioContext = new (window.AudioContext || window.webkitAudioContext)();
Каждый аудиоисточник связан в цепочки своими входами и выходами. Источниками могут быть осцилляторы (осцилляторNode) или аудиофайлы (MediaElementAudioSourceNode).
Давайте создадим осциллятор;
// Create Oscillator node const oscillator = audioContext.createOscillator();
Использование аудиофайлов немного отличается, поскольку мы должны установить аудиофайл как переменную и передать его в наш audioContext;
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let myAudio = document.querySelector(“audio”);
let pre = document.querySelector(“pre”);
let myScript = document.querySelector(“script”);
pre.innerHTML = myScript.innerHTML;
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
let source = audioContetx.createMediaElementSource(myAudio);
Теперь, когда у нас есть входы, мы можем связать их с другими узлами. Это может быть так же просто, как вывод или маршрутизация источника звука на другие узлы для дальнейшей обработки звука.
Одной из распространенных модификаций является умножение выборок на значение, чтобы сделать их громче или тише, и для этого нам может потребоваться добавить GainNode в цепочку.
// Create a gain node let gainNode = audioContext.createGain();
После обработки звука пора отправить его в узел назначения. Этот шаг нужен только в том случае, если мы хотим, чтобы пользователь слышал звук, так как выход пункта назначения отправляет звук в динамик или наушники. В приведенном ниже коде я подключаю созданный ранее gainNode к целевому узлу;
// First connecting the oscillator into the gainNode oscillatorNode.connect(gainNode); // Now connecting the gainNode to destination node gainNode.connect(audioContext.destination);
То, что мы сделали здесь, представляет собой простой типичный рабочий процесс для веб-аудио, который мы можем описать как пятиступенчатый процесс;
1. Создайте аудиоконтекст
2. Внутри контекста создайте такие источники, как осциллятор, ‹ аудио ›или поток
3. Создайте узлы эффектов, такие как усиление, реверберация и т. д.
4. Выберите конечный пункт назначения, как наши системные динамики
5. Соедините модули, подключив источники. к эффектам, а эффекты к месту назначения
Что в конце будет выглядеть так, как показано ниже;
В этом блоге я построил самый простой процесс, но есть еще много интересного об API веб-аудио, о котором я расскажу в будущих блогах.
Попробуйте и наслаждайтесь шумихой в Интернете!
