cat's purr on js

by ova777

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div>
    <button>start</button>
</div>
<div class="sliders">
    <div>
        Volume: <span id="vol_val">0.15</span>
        <div id="slider_vol" style="width: 100px;"></div>
    </div>
    <div>
        Visual FPS: <span id="fps_val">4</span>
        <div id="slider_fps" style="width: 100px;"></div>
    </div>
</div>
<div style="margin-top: 15px;">
    <div><strong>Visual:</strong></div>
    <div class="canvs">
        <div><canvas id="canv1"></canvas>FloatFrequencyData</div>
        <div><canvas id="canv2"></canvas>ByteFrequencyData</div>
        <div><canvas id="canv3"></canvas>ByteTimeDomainData</div>
    </div>
</div>

CSS

canvas {
    border: solid 1px gray;
    width: 300px;
    height: 200px;
    display: block;
}
.canvs div {
    height: 220px;
    float: left;
    margin-right: 10px;
}
.sliders {
    display: block;
    height: 50px;
    padding-top: 10px;
    margin-left: 20px;
}
.sliders div {
    float: left;
    width: 150px;
}
.sliders div div {
    margin-top: 10px;
}

JavaScript

//Контексты canvas`ов
var canv1 = document.getElementById('canv1').getContext('2d');
var canv2 = document.getElementById('canv2').getContext('2d');
var canv3 = document.getElementById('canv3').getContext('2d');
var canvInited = false;
//Массивы, которых хранятся динамически создаваемые генераторы, управление громкостью, фильры, задержки
var gens = [], vols = [], filts = [], dels = [];
//Глобальные объекты, относящиеся к Web Audio API
var context, destination, vol, analyser;
//Управление громкостью
var maxVolume = 0.15, curVolume = 0;
//visual fps
var fps = 4;

//Создает генератоы звука (массив arr), пропускает через фильтр (flt), с задержкой del
createGens = function(arr, flt, del){
    //Создаем объект задержки звука
    if(undefined !== del) {
		dels.push(false);
		var indd = dels.length-1;
		dels[indd] = context.createDelay();
		dels[indd].delayTime.value = del;
		
		//Подключаем задержку к главному объекту управления громкостью
        dels[indd].connect(vol);
	}
    //Создаем фильтр
	if(undefined !== flt) {
		filts.push(false);
		var indf = filts.lenght-1;
				
		filts[indf] = context.createBiquadFilter();
		filts[indf].type = flt.type;
		filts[indf].frequency.value = flt.freq;
		filts[indf].frequency.Q = flt.q;
		
        //Если есть задержка - подключаем фильтр к ней, иначе - к главному объекту правления громкостью
		if(undefined !== del) filts[indf].connect(dels[indd]);
		else filts[indf].connect(vol);
	}
    //Создаем генераторы звука (у каждого своя громкость и генератор)
	for(var i=0; i<arr.length; i++) {
		gens.push(false); vols.push(false);
		var ind = gens.lenght-1;
	
        vols[ind] = context.createGain();
		vols[ind].gain.value = arr[i].vol;
		if(undefined !== flt) vols[ind].connect(filts[indf]);
		else {
			if(undefined !== del) vols[ind].connect(dels[indd]);
			else vols[ind].connect(vol);
		}
			
		gens[ind] = context.createOscillator();
		gens[ind].type = arr[i].type;
		gens[ind].frequency.value = arr[i].freq;
		gens[ind].detune.value =...