AnalyserNode

AnalyserNode - об'єкт який аналізує частоти звуку.

Синтаксис:

var Analyse = AudioContext.createAnalyser();

Параметри:

Analyse - змінна якій присвоюється об'єкт AnalyserNode.

AudioContext - об'єкт AudioContext

Опис:

AnalyserNode об'єкт який представляє собою аудіо вузол для аналізу частоти звуку. Використовується для візуалізації адіо звуку.

AnalyserNode

AudioNode

fftSize - розмір FFT.
frequencyBinCount - кількісті значень даних які повертаються при аналізу частот звуку.
minDecibels - мінімальне значення потужності в діапазоні масштабування для аналізу даних FFT.
maxDecibels - максимальне значення потужності в діапазоні масштабування для аналізу даних FFT.
smoothingTimeConstant - середнє значення між поточним буфером та останнім буфером який AnalyserNode обробляється.

AnalyserNode

AudioNode

AnalyserNode.getFloatFrequencyData() - копіює поточні дані частот звуку у масив Float32Array.
AnalyserNode.getByteFrequencyData() - копіює поточні дані частот звуку у масив Uint8Array.
AnalyserNode.getFloatTimeDomainData() - копіює поточну форму хвилі сигналу у масив Float32Array.
AnalyserNode.getByteTimeDomainData() - копіює поточну форму хвилі сигналу у масив Uint8Array.

Приклад:

if(window.AudioContext){
	var audio = new AudioContext();
	var analis=audio.createAnalyser();
	alert(analis);
}else alert('Ваш браузер не підтримує Web Audio');

Візуалізація аудіо звуку з елемента audio:

if(window.AudioContext){
	audio = new AudioContext();
	player = document.getElementById('player');
	source = audio.createMediaElementSource(player);
	analis=audio.createAnalyser();
	canvas=document.getElementById('canvas');
	ctx=canvas.getContext('2d');
	source.connect(analis);
	analis.connect(audio.destination);

	analis.fftSize=32;
	dani = new Uint8Array(analis.frequencyBinCount);

	draw=function(){ //функція яка відображає отримані дані частот на полотні canvas
		analis.getByteTimeDomainData(dani);
		ctx.fillStyle='black';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle='red';
		var w=Math.ceil(canvas.width/dani.length);
		for(var i=0,x=0;i<dani.length;i++,x+=w)
		ctx.fillRect(x,dani[i],w,canvas.height);
		setTimeout(draw,50); //або requestAnimationFrame(draw)
	}
	draw();
	player.play();
}else alert('Ваш браузер не підтримує Web Audio');

Приклад візуалізації аудіо звуку з мікрофона за допомогою Web Audio:

if(navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ audio: true }).then( function(stream) {
	aCtx = new AudioContext();
	canvas=document.getElementById('canva');
	ctx=canvas.getContext('2d');
	analyser = aCtx.createAnalyser();
	microphone = aCtx.createMediaStreamSource(stream);
	microphone.connect(analyser); 
	
	//analyser.connect(aCtx.destination); //якщо розкоментувати даний рядок то звук з мікрофона буде виводитися на динаміки 
	
	analyser.fftSize = 64;
	data = new Float32Array(analyser.frequencyBinCount); 

function draw(){ //функція яка відображає отримані дані частот на полотні canvas
	analyser.getFloatTimeDomainData(data);
	ctx.fillStyle='black';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.lineWidth=2;
	ctx.strokeStyle='red';
	ctx.beginPath();
	var w=canvas.width/data.length;
	ctx.moveTo(x,canvas.height/2+data[i-2]*canvas.height);
	for(var i=1,x=0;i<data.length;i++,x+=w){
		ctx.lineTo(x,canvas.height/2+data[i]*canvas.height);
	}
	ctx.lineTo(x+w,canvas.height/2+data[i-2]*canvas.height);
	ctx.stroke();
	requestAnimationFrame(draw);
}
draw();
}, function(err) { alert("Виникла помилка: " + err.name); } );
}else{ alert("getUserMedia не підтримує Ваш браузер"); };