Изпробване на Audio API на примера за писане на визуализатор
Но преди да започнем да се занимаваме директно с Audio API, трябва да скицираме подготовката на нашия визуализатор и ще направим това с помощта на canvas.
Създайте празно място
И така, нека създадем платното:
Страхотно, имаме платно и след това трябва да създадем елементи, които ще отговарят за визуализацията на звуковия сигнал. В нашия случай това ще бъдат обикновени кръгове:
Функцията за рисуване, която ще рисува нашите кръгове, изглежда така:
Всъщност нашият препарат е почти готов, остава само конструкторът на частиците Particle.
Създаване на анализатор
И така, имаме всичко, за да започнем да пишем визуализатор. Концепцията за AudioContext ще играе основна роля. Една страница може да има само един контекст, но това е достатъчно, за да реализирате всичко, което сърцето ви желае. Почти всички методи за създаване на модули са методи на AudioContext. Пълен списък с тях можете да видите тук. Тъй като спецификацията на AudioContext все още не е напълно одобрена, ще я създадем по следния начин:
Това е достатъчно, за да създадете AudioContext в Opera, Chrome и Firefox. От контекста, който създадохме, имаме нужда от следните методи:
И така, използвайки това, което научихме за AudioContext, нека скицираме конструктора на нашия анализатор:
Тази функция, когато бъде извикана, ще създаде аудио контекст за нас и интерфейс за анализ на данни. Тук можете да видите, че когато създаваме анализатора, задаваме стойностите за параметритеsmoothingTimeConstant-честотата на запитване, с която анализаторът ще изисква данни иfftSize- размерността на преобразуването на Фурие (грубо казано, този параметър показва колко данни искаме да получим в резултат на честотния анализ на сигнала, това число ще бъде равно на fftSize / 2). Използваме функциятаUint8Array, за да създадем масив с ясна индикация на границите, в нашия случай дължината му ще бъде 256.
Досега имаме търкаляща се топка в масива, но това не е изненадващо, тъй като няма източник на сигнал, който трябва да бъде анализиран. Нека добавим създаването на аудио елемент към нашия конструктор и в същото време да се абонираме за събитиетоcanplayза него, което се случва, когато браузърът смята, че е получил достатъчно данни, за да започне възпроизвеждането. Имайки това предвид, нашият конструктор ще приеме формата:
Остава да изпратим нашия създаден аудио поток към AudioContext и да асоциираме анализатора с източника и дестинацията. Това е доста лесно да се направи, защото умните хора, които са създали Web Audio API, са се погрижили за това и благодарение на тях всеки аудио модул има методconnect, който приема стойността за свързване като параметър. Като цяло крайният вид ще изглежда така:
Тук си струва да споменемAudioContext.destination- това е системният аудио изход по подразбиране (обикновено високоговорители). МетодътgetByteFrequencyData- този метод получава данни от анализатора и ги копира в предадения масив, който в крайна сметка връщаме, благодарение на великата магия на затварянията.
Нека добавим създаването на анализатора към нашата функция createParticles, като резултат получаваме:
Това е всичко, получихме нашия прост визуализатор и леко отворихме завесата над API за уеб аудио. Цялата тази красота ще работи в Chrome, Opera, Firefox. IE, както винаги, остава назад. Още малкофантастична демонстрация, която използва този код: demo Демо код в github: Analyzer Код в codepen: Analyzer
Разбира се, това е само малка част от възможностите, на които е способен Audio API, но трябва да започнете от някъде. Вече можете да използвате Audio API за:
- Съраунд звук за игри
- Приложения за аудио обработка
- Аудио синтез
Hardcore conf в C++. Каним само професионалисти.