Web Audio API - запись звука с микрофона онлайн

Урок 4. Обработка аудио потока с микрофона на Web Audio API

Привет) Сегодня мы мы напишем простенький обработчик аудио потока с микрофона на Web Audio API. Обработчик сможет накладывать простенькие фильтры и регулировать громкость микрофона. Ну…приступим.

ДЕМО (перейдите на вкладку «Микрофон»)

Мы будем использовать navigator.getUserMedia метод. Этот метод запрашивает у пользователя разрешение на использование микрофона  и возвращает аудио-поток. Подробнее о этом методе можете прочитать на сайте миозиллы подробнее.Вот такое окошко запрашивает разрешение на использование микрофона

запрос_на использование_микрофона

Для наложения эффектов будем использовать  Convolver Node подробнее о этом объекте можете прочитать здесь.

Как обычно для начала давайте создадим элементы управления, их мы создадим в HTML файле

<div class=’micfilter’>
<h3 align=’center’> Свёртка </h3>
<a href=»#» onClick=»nomicefects() » class=»buttons»> Включить микрофон</a>
<!— <input type=»Button» value=»Включить микрофон» onClick=»nomicefects();»>
—>
<br>
<input type=»radio» name=»micfiltertype» checked value=»Откл» onChange=»nomicefects();»> Эфекты отключены<br>
<input type=»radio» name=»micfiltertype» value=»Five Columns.mp3″ onChange=»initmicefects(0)» >Пять столбов<br>
<input type=»radio» name=»micfiltertype» value=»Five Columns Long.mp3″ onChange=»initmicefects(1)» > Пять столбов длинные<br>
<input type=»radio» name=»micfiltertype» value=»French 18th Century Salon.mp3″ onChange=»initmicefects(2)»>Французский салон<br>
<input type=»radio» name=»micfiltertype» value=»In The Silo Revised.mp3″ onChange=»initmicefects(3)»>Сило<br>
<input type=»radio» name=»micfiltertype» value=»Narrow Bumpy Space.mp3″ onChange=»initmicefects(4)»>Космос<br>
<input type=»radio» name=»micfiltertype» value=»Nice Drum Room.mp3″ onChange=»initmicefects(5)»>Барабанная комната<br>
<input type=»radio» name=»micfiltertype» value=»Parking Garage.mp3″ onChange=»initmicefects(6)» >Пустой гараж<br>
<br> <input type=»range» title=»Уровень микрофона» class=»drumchenellevel» id=’micrfiltercontrol’ min=0 max=2 value=0 step=0.1><br>
</div>

Давайте теперь применим стили для созданных элементов.

.micfilter
{
width:280px;
float: left;
margin-left:4px;
background-color:rgba(255,255,255,0.1);
border-radius:6px;
}
#micrfiltercontrol{width:140px;}

Свертка средствами Wtb Audio API
Свертка средствами Wtb Audio API

Мы использовали  радиопереключатели для выбора применяемого  аудио-эффекта. В событии onChange мы вызываем функцию инициализации используемого эффекта, подробнее это мы рассмотрим ниже.А сейчас давайте займемся веб аудио апи.

Для начала как обычно нужно создать аудиоконтекст, конечно если вы его не создали ранее, напоминаю что он должен быть один! так же объявим необходимые нам переменные и массивы. buffers=[] — это массив фильтров котрые мы будем применять к нашему аудио-потоку с микрофона.

var   ctx,micsource,buffers=[],convolverNode,micvolume;

if (typeof AudioContext !== «undefined») {
ctx = new AudioContext();
} else if (typeof webkitAudioContext !== «undefined») {
ctx = new webkitAudioContext();
} else {
throw new Error(‘AudioContext not supported. :(‘);
}

Пришло время  написать функции для запроса у пользователя разрешения на использование микрофона и объявления объекта convolverNode, который позволит нам применять простенькие эффекты к нашему аудио-потоку с микрофона.

micsource — это источник аудио-потока для веб аудио апи.

convolverNode — объект для свертки(аудио-эфект).

micvolume — регулятор громкости микрофона.

function getmicrofonestream()
{
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getUserMedia({ audio: true }, function (stream) {
//Создаем интерфейс для получения данных из потока
micsource = ctx.createMediaStreamSource(stream);
console.log(‘micsource created’);
}, function (e) {
alert(e);
});
convolverNode = ctx.createConvolver();
convolverNode.loop = true;
convolverNode.normalize = true;
micvolume=ctx.createGain();
micvolume.gain.value=0;
document.getElementById(‘micrfiltercontrol’).addEventListener(‘change’,function (e) {

micvolume.gain.value =
e.target.value;
}

, false);
}

Следующий этап это выбор аудио файла для свртки, имена файлов указаны в массиве buffers, путь к папке с аудиофайлами находится в теле функции loadFile. Эту функцию мы написали во 2 уроке по Web Audio API, в нее мы передаем три параметра: название файла, источник для web audio API и указатель использования анимации загрузки, ставим его в 0 чтобы анимация при загрузке в аудио буфер не отображалась.

function initmicefects(i)
{ buffers=[
«Five Columns Long.mp3»,«Five Columns.mp3»,«French 18th Century Salon.mp3»,«In The Silo Revised.mp3»,
«Narrow Bumpy Space.mp3»,«Nice Drum Room.mp3»,«Parking Garage.mp3»];
loadFile(buffers[i],convolverNode,0);
convolverNode.connect(micvolume);
micsource.connect(convolverNode);
micvolume.connect(ctx.destination);
}

Ниже приведен код функции загрузки аудио-файла в буфер источника web audio api.

function loadFile(path,drumsrc,loadident) {
readytouse=0;
if(loadident==1)document.getElementById(«circularG»).style.display=»block»;
buf= false;
var req = new XMLHttpRequest();
req.open(‘GET’,’../sampels/’+path,true);
req.responseType = ‘arraybuffer’;
req.onload = function(e) {
ctx.decodeAudioData(req.response, function(decodedArrayBuffer) {
drumsrc.buffer=decodedArrayBuffer;
document.getElementById(«circularG»).style.display=»none»;readytouse=1;}, function(e) {
alert(‘Error decoding file’, e);
} );
};
req.send();
}

Давайте еще напишем функцию для отключения эффектов от микрофона. Просто подключим источник к регулятору громкости в обход convolver node.

function nomicefects()
{
convolverNode.disconnect();
micsource.connect(micvolume);
micvolume.connect(ctx.destination);
}

Осталось только вызвать функцию getmicrofonestream(); в событии OnLoad тега.
Ну и напоследок демо работы микрофона с Web Audio API.

ДЕМО (перейдите на вкладку «Микрофон»)


Добавить комментарий