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

Урок 1. HTML5 Web Audio API, создание аудио-петли и регулировка скорости воспроизведения

Здравствуйте, в этом уроке мы добавим в наш аудио-редактор на Web Audio API простенькое зацикливание трека и регулятор скорости воспроизведения. Я умышленно не стал рассказывать о верстке макета, думаю каждый сам сможет сделать то что его душе угодно.
Везде я использую просто javascript, поскольку во время написания этого кода я только начинал знакомится с вебом и не знал jQuery, а тепер как-то не хочется переписывать его.

Первым делом давайте добавим в HTML файле три кнопки : «Играть», «Стоп», «Нормальная скорость» и ползунок.

<a class=»buttons» href=»#»> Играть</a>
<a class=»buttons» href=»#»> Стоп</a>
Скорость воспроизведения
<input id=»loopspeed» title=»Скорость воспроизведения» max=»3″ min=»0″ step=»0.01″ type=»range» value=»1″ />
<a class=»buttons» href=»#»> Нормальная скорость</a>

Теперь создадим выпадающий список с треками петли, я создам его на javascript
Workpartloop – это идентификатор вкладки в которую я буду добавлять новые элементы, у меня это простенький div.

function createloopselect( )
{
loopputh=['BASS_LOOP1.mp3','BASS_LOOP2.mp3','BASS_LOOP3.mp3','BASS_LOOP4.mp3','BASS_LOOP5.mp3','BASS_LOOP6.mp3','BASS_LOOP7.mp3','BASS_LOOP8.mp3','BASS_LOOP9.mp3','BASS_LOOP10.mp3','BASS_LOOP11.mp3','BASS_LOOP12.mp3','BASS_LOOP13.mp3','MUSIC_LOOP1.mp3','MUSIC_LOOP2.mp3','MUSIC_LOOP3.mp3','MUSIC_LOOP4.mp3','MUSIC_LOOP5.mp3','MUSIC_LOOP6.mp3','MUSIC_LOOP7.mp3','MUSIC_LOOP8.mp3','MUSIC_LOOP9.mp3','MUSIC_LOOP10.mp3','MUSIC_LOOP11.mp3','MUSIC_LOOP12.mp3'];
var n,d=document.getElementById('workpartloop');
e= document.createElement('select');
e.id='loopselect';
e.name='loopselectname'
e.className='loopselectclass'
d.appendChild(e);
n=0;
var sel=document.getElementById('loopselect');
for (var s=0;s<=25;s++) {
var op = document.createElement('option');
op.setAttribute('value',srcputh[s] ) ;
op.innerHTML =loopputh[n] ;
sel.appendChild(op);
n++;
}
e=document.createElement('br');
d.appendChild(e);
d=document.getElementById('eqloop');
for (var j=0;j<=13;j++) {
e=document.createElement('input');
e.id=j+'loopfilter';
e.type='range';
e.orient='vertical';
e.min='-16';
e.max='16';
e.value='';
e.step='0.1';
e.title='Громкость канала';
e.className='eqcontrols';
d.appendChild(e);
}
}

В результате выполнения кода имеем вот такие элементы управленияpetlya_audio_api
Теперь пришло время перейти к работе с Audio API. Создадим аудио контекст и объявим нужные нам переменные.

var ctx,src,buf, loopsource,loopputh=[], req, buf, readytouse;
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, и указатель использования индикатора загрузки( 0 или 1) .

function loadFile(path,src,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) {
src.buffer=decodedArrayBuffer;
document.getElementById(«circularG»).style.display=»none»;readytouse=1;}, function(e) {
alert(‘Error decoding file’, e);
} );
};
req.send();
}

Элемент с идентификатором «circularG» – это блок с CSS анимацией загрузки, ее вы можете сгенерировать вот на этом сайте , к примеру.

Теперь создадим саму функцию петли


function loop()
{
loopsource=ctx.createBufferSource();// создадим источник для WebAudio API
loopsource.loop = true; //установим свойство петли в true
loopsource.playbackRate.value = 1; /// укажем скорость воспроизведения
document.getElementById(‘loopspeed’).addEventListener(‘change’,function (e) {
loopsource.playbackRate.value =
e.target.value;
}
, false); //свяжем ползунок регулятора скорости воспроизведения с источником Web Audio API
loadFile(document.getElementById(‘loopselect’).selectedOptions[0].text, loopsource,0); // Вызов загрузки файла в буфер аудио апи
loopsource.connect(ctx.destination);
}

Ну вроде бы как все=)


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