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

Урок 3. HTML5 Web Audio API драмм-машина

Демо урока вы можете посмотреть здесь на вкладке драм машины http://online-audio-redaktor.esy.es/

Привет, читатель! Сегодня будет довольно большой урок по созданию драм машины на Web Audio API. Начнем мы с инструментов контроля воспроизведения. Перейдем в HTML файл и добавим туда кнопки играть и стоп, кроме того добавим туда поле для ввода времени проигрывания звука.

<div id=»workpartdrum» class=»workpart»>
<a id=»stopdrumbutton» class=»buttons» href=»#»> Стоп</a><a id=»playdrumbutton» class=»buttons» href=»#»> Играть</a>
<input id=»drumloop» max=»3000″ min=»100″ type=»number» value=»200″ />
</div>

Теперь давайте создадим все остальные элементы, чекбоксы, списки сэмплов и регулятры громкости каналов. Я предлагаю использовать для этого Java Script.

Названия сэмплов предлагаю хранить в массиве srcputh, туда мы их внесем заранее. Не будем усложнять код, это ведь пример.

Workpartdrum – это идентификатор див-блока куда мы все это запихнем.

function createbuttons()
{var e,i;
srcputh=[‘CLAP.mp3′,’CLAP1.mp3′,’CLAP2.mp3′,’CLAP3.mp3′,’HAT.mp3′,’HAT1.mp3′,’HAT2.mp3′,’HAT3.mp3’,

‘KICK.mp3′,’KICK1.mp3′,’KICK2.mp3′,’KICK3.mp3′,’SNARE.mp3′,’SNARE1.mp3′,’SNARE2.mp3’,‘SNARE3.mp3

‘,’CLAP1.mp3′,’HAT.mp3′,’KICK1.mp3′,’SNARE2.mp3’];
var d=document.getElementById(‘workpartdrum’);
var n=0;
for(var j=1;j<6;j++)
{
e= document.createElement(‘br’);
d.appendChild(e);
e= document.createElement(‘select’);
e.id=j+’drum’;
e.name=j+’drumname’
e.className=’drumclass’
d.appendChild(e);
var sel=document.getElementById(j+’drum’);
for (var s=0;s<=3;s++) {
var op = document.createElement(‘option’);
op.setAttribute(‘value’,srcputh[s] ) ;
op.innerHTML =srcputh[n] ;
sel.appendChild(op);
n++;
}
for(var i=1;i<=18;i++)
{
e=document.createElement(‘input’);
e.className=’dcheck’;
e.id=’check’+j+’,’+i;
e.type=’checkbox’;
e2=document.createElement(‘label’);
e2.innerHTML=’ ‘;
e2.FOR=’checkbox’+j+’,’+i;
e2.id=’checklabel’+j+’,’+i;
e2.className=’dchecklabel’;
d.appendChild(e);
d.appendChild(e2);
}
e=document.createElement(‘input’);
e.id=j+’drumlevel’;
e.type=’range’;
e.min=’0′;
e.max=’1′;
e.value=’1′;
e.step=’0.05′;
e.title=’Громкость канала’;
e.className=’drumchenellevel’;
d.appendChild(e);
}
}

Мы создали для каждого чека лейбл, его мы используем для индикации прохождения по чекам.

Получилось у нас вот такое окошко

Драм-машина на веб аудио апи
Драм-машина на веб аудио апи

Перейдем к работе с веб аудио АПИ. Как обычно нам нужно создать аудио  контекст (если он еще не создан) и объявить нужные переменные.

stopdrum=0 – переменная для определения какую клавишу сделать активной ( стоп иди играть)

drumgain=[] – массив хранящий в себе регуляторы громкости каждого канала ( их у нас 5)

var ctx, drumsrc=[], buffer, stopdrum=0, drumgain=[];
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. Но все же я приведу ее код ниже, а объяснения по ней вы сможете найти в первом уроке.

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();
}

Теперь займемся воспроизведение нужных нам звуков. Мы будем использовать таймер, а в его теле два счетчика для перехода на новый чек бокс и применения к нему новых стилей. Если чекбокс отмечен, тогда загружаем в буфер web audio api наш звук и воспроизводим его.

function drummstart( )
{
var i,z;
stopdrum=0;
var drumloop=document.getElementById(‘drumloop’).value;
i=1; z=1;
interval =setInterval(function(){ for(var j=1;j<6;j++){ var ch= document.getElementById(‘check’+j+’,’+i);
if (z%2==1) document.getElementById(‘checklabel’+j+’,’+i).style.cssText=’border-color:red;’;
if (z%2==0) {document.getElementById(‘checklabel’+j+’,’+i).style.cssText=’border-color:cyan;’}
if( ch.checked){
drumsrc[j-1]= ctx.createBufferSource();//создаем источник
loadFile(document.getElementById(j+’drum’).selectedOptions[0].text,drumsrc[j-1],0);
drumgain[j-1] = ctx.createGain(); //создаем усилитель
drumgain[j-1].gain.value =document.getElementById(j+’drumlevel’).value; //присваиваем усилителю значение ползунка громкости
drumsrc[j-1].connect(drumgain[j-1]);
drumgain[j-1].connect(ctx.destination);
drumsrc[j-1].start(0);
}
}
if(i==18){i=0;z++;}
i++;
//
if(stopdrum==1){ clearInterval(interval);for(var d=1;d<6;d++) //если нажата кнопка стоп, то останавливаем воспроизмедение и устанавливаем новій стиль для label каждого чекбокса.
for(var f=1;f<=18;f++)
if (document.getElementById(‘check’+d+’,’+f).checked==false)document.getElementById(‘checklabel’+d+’,’+f).style.cssText=’border-color:black;’;}},drumloop);
}

Теперь создадим функцию для присвоения переменной stopdrum значения 1 в случае нажатия на стоп, это позволит сделать кнопку играть активной.

function sdrumm() //stopdrumbutton
{
if (stopdrum==0){stopdrum=1; console.log(‘stop’);}
}

Запускаться наша драм-машина на web audio API будем через событие onClick кнопки «Играть».

onClick=»drummstart();document.getElementById(‘stopdrumbutton’).disabled=false;document.getElementById(‘playdrumbutton’).disabled=true;»

Теперь давайте напишем стили для нашей драм машины на веб аудио апи

.dcheck{ opacity:1; margin-right:-30px; width:30px;height:30px;margin-top:0px;
}
.dchecklabel
{cursor:pointer;
display:inline-block;
color:cyan;
height:2px;
width:23px;
background-color:black;
border:1px solid ;
border-color:black;
border-radius:6px;
margin:2px;
transition:background-color 0.5s;
}
.dchecklabel:hover{ border-color:cyan;}
.dcheck:checked + label {
border-color:cyan;
background-color:cyan;
}
.drumclass
{
height:15px;
width:110px;
}
.drumchenellevel
{
width:50px;
}

Особо код не объясняю, да и объяснять то нечего, все очень примитивно написано. Надеюсь все работает.
Демо вы можете посмотреть здесь http://online-audio-redaktor.esy.es/#


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