Като ентусиаст на музика и аудио продукция през последните 10 години бях свидетел на нарастващото влияние на технологиите върху музиката. Удивително е как технологията направи производството и обработката на звука по-достъпни. Не беше много отдавна, когато всичко трябваше да се прави в напълно аналогово звукозаписно студио, оборудвано със скъпо рядко оборудване.
С въвеждането на DAW повечето от стъпките могат да бъдат извършени навсякъде, където артистите имат достъп до компютър и чифт слушалки, въпреки че бихте могли да се насладите на това и да похарчите колкото студио, но идеята е да поставите фокуса на музикалното производство върху творческата част, като я направи по-достъпна и достъпна.
Преминаването от аналогов към цифров не само улесни артистите и продуцентите, но промени присъствието на аудио в браузърите. Преди беше толкова лесно, колкото използването на HTML ‹audio› таг, който имаше много ограничения, но с инструменти като API за уеб аудио аудио обработката направи огромна крачка напред.
Вместо да възпроизвеждаме аудиото само в браузъра, API за уеб аудио ни позволява да въвеждаме различни аудио източници или входове, да обработваме входния сигнал и да избираме дестинацията или изхода. На всичкото отгоре предоставя визуализация, което е друг интересен свят сам по себе си и ще ви отведа и там, но в бъдещите си блогове.
Ако не ви е скучно от толкова дълго въведение, нека се запознаем малко по-добре с Web Audio API и да научим някои от основните концепции.
API за уеб аудио обработва аудио операции в аудио контекст. Той е проектиран по модулен начин за маршрутизиране. Това означава, че основните аудио операции се извършват с аудио възли, които са свързани заедно, за да образуват графа за маршрутизиране на аудио. Модулният дизайн дава гъвкавост за създаване на сложни потоци от аудио сигнали.
// Create web audio api context const audioContext = new (window.AudioContext || window.webkitAudioContext)();
Всеки аудио източник е свързан във вериги чрез своите входове и изходи. Източниците могат да бъдат осцилатори (oscillatorNode) или могат да бъдат аудио файлове (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. Свържете модулите, като свържете източниците нагоре към ефектите и ефектите към дестинацията
Което в края ще изглежда по-долу;
Създадох най-простия процес в този блог, но има много повече за Web Audio API за откриване, които ще разгледам в бъдещи блогове.
Опитайте и се насладете на вдигането на шум в мрежата!
