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

Урок 2. HTML5 Web Audio API, создание усилителя. Сведение треков с помощью Web Audio API.

Здравствуй, читатель. Сегодня мы добавим возможность сведения треков с помощью аудио АПИ. Для этого мы создадим два аудио источника и два усилителя, добавляя значение первого усилителя будем уменьшать значение второго, тем самым получим эффект сведения.

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

<div id=»svedenie» class=»nods «>
<input id=»input_cross_file1″ onClick=»loadLocalFile (crosssrc1,’input_cross_file1′,1);crossfade();» type=»file»>
<input id=»input_cross_file2″ onClick=»loadLocalFile (crosssrc2,’input_cross_file2′,1);» type=»file»>
<BR>
<input title=»0″  type=»range»  id=»crosscontrol» min=0 max=1 value=0 step=0.01 >
<BR>
<input type=»number» id=»crosssec» max=»30″ min=’1′ title=»kol seconds» value=2 >
<a href=»#»  onClick=»play() »  class=»buttons»> Играть</a>
<a href=»#»  onClick=»crosssrc1.stop(0) ;
crosssrc2.stop(0) ; »  class=»buttons»> Стоп</a>
<a href=»#»  onClick=»crossfadetimer () »  class=»buttons»> Автосведение</a>
<a href=»#»  onClick=»backcrossfadetimer () »  class=»buttons»> Обратное автосведение</a>
</div>

Мы создали кнопки старта и остановки воспроизведение, диапазон для ручного сведения и числовое поле для указания длительности сведения на web audio api в секундах. Вот как выглядят наши элементы управления.

Web audio api, сведение треков
Web audio api, сведение треков

Если вы не выполняли предыдущий урок по web audio API, то вам необходимо так же создать аудио контекст, вся последующая работа проводится в файле скрипта.

Аудио контекст


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

Далее нам необходимо создать источники и усилители web audio api.

var   crossgain1,crossgain2,crossbuf1,crossbuf2,crosssrc1,crosssrc2,buffer;
crosssrc1 = ctx.createBufferSource();
crosssrc2 = ctx.createBufferSource();
crossgain1 = ctx.createGain();
crossgain2 = ctx.createGain();

Теперь создадим функцию загрузки файла с локального компьютера в буфер источника web audio API,  в нее мы будем передавать два параметра источник и идентификатор кнопки загрузки файла.

function loadLocalFile (sorc,id)
{
var   inputfile= document.getElementById(id);
inputfile.addEventListener(‘change’,function(e){
document.getElementById(«circularG»).style.display=»block»;
alert(‘Loading…’);
var reader= new FileReader();
reader.onload= function(e){ctx.decodeAudioData(this.result,function(buffer) {
sorc.buffer = buffer   ; document.getElementById(«circularG»).style.display=»none»;  },
function(e) { alert(‘Error decoding file’, e);   });
};
reader.readAsArrayBuffer(this.files[0]);
},false);
}

circularG – это анимация загрузки, ее мы показываем пока идет загрузка аудиоданных в буфер. Можно убрать ее для упрощения кода.

Свяжем усилители и ползунок ручной регулировки сведения на HTML5 web audio API.

function crossfade()
{
crossgain1.gain.value = 1;
crossgain2.gain.value = 0;
document.getElementById(‘crosscontrol’).addEventListener(‘change’,function (e) {
crossgain2.gain.value=
e.target.value;
crossgain1.gain.value=
1-crossgain2.gain.value;
},false);
crosssrc1.connect(crossgain1);
crosssrc2.connect(crossgain2);
crossgain1.connect(volumegain);
crossgain2.connect(volumegain);
}

Теперь добавим автосведение и обратное автосведение. Для этого создадим две функции.

function          crossfadetimer () {
var z,interval;
z=document.getElementById(‘crosssec’).value;
var interval =setInterval(function(){ crossgain2.gain.value+=0.05; crossgain1.gain.value-=0.05;
console.log(‘vipoln int’);if(crossgain2.gain.value>=1) clearInterval(interval);},z/20*1000);
if(crossgain2.gain.valu==1) clearInterval(interval);
}
function          backcrossfadetimer () {
var z,interval;
z=document.getElementById(‘crosssec’).value;
interval =setInterval(function(){ crossgain2.gain.value-=0.05; crossgain1.gain.value+=0.05;
console.log(‘vipoln int’);if(crossgain1.gain.value>=1) clearInterval(interval);},z/20*1000);
}

Идентификатор crosssec – это числовое поле для указания длительности перехода с одного трека на другой.

Теперь создадим функцию для запуска проигрывания загруженных треков.

function play() {
crosssrc1.start(0) ;
crosssrc2.start(0) ;
}

А остановку воспроизведения допишем в событии Onclick кнопки «Стоп»

<a href=»#»  onClick=»crosssrc1.stop(0) ;
crosssrc2.stop(0) ; »  class=»buttons»> Стоп</a>

Советую обратить внимание на вызов функций в HTML файле.
The end.
И еще, строго не судите=)


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