AnalyserNode.getFloatFrequencyData()

AnalyserNode.getFloatFrequencyData() - копіює поточні дані частот звуку у масив Float32Array.

Синтаксис:

AnalyserNode.getFloatFrequencyData(array);

Параметри:

AnalyserNode - об'єкти AnalyserNode.

array - змінна, масив типу Float32Array в який буде скопійовані дані частот звуку.

Опис:

getFloatFrequencyData() метод об'єкта AnalyserNode який копіює поточні дані про частоти звуку в масив Float32Array з плаваючою точкою.

Якщо в масиві менше елементів ніж AnalyserNode.frequencyBinCount тоді надлишкові елементи будуть скинуті.

Якщо масив має більше елементів ніж AnalyserNode.frequencyBinCount то ді надлишкові елементи будуть ігноруватися.

Дані в масиві про частоту знаходяться в одиницях дБ.

Якщо потрібна більш висока продуктивність і не потрібна точність використовуйте метод AnalyserNode.getByteFrequencyData().

Приклад:

if(window.AudioContext){
	var div=document.getElementById('results');
	var audio = new AudioContext();
	var player = document.getElementById('player');
	var source = audio.createMediaElementSource(player);
	var analis=audio.createAnalyser();
	source.connect(analis);
	analis.connect(audio.destination);
	analis.fftSize=32;
	mas = new Float32Array(analis.frequencyBinCount);
	
	function draw(){
		analis.getFloatFrequencyData(mas);
		for(var i=0,s='';i<mas.length;i++)
		s+=' '+mas[i];
		div.innerHTML=s;
		setTimeout(draw,50); //або requestAnimationFrame(draw)
	}
	draw();
	player.play();
}else alert('Ваш браузер не підтримує Web Audio');

<canvas id="canvas2"></canvas>
<audio id="player2" src="/dani/test.ogg"></audio>

if(window.AudioContext){
	var audio = new AudioContext();
	var player = document.getElementById('player2');
	var source = audio.createMediaElementSource(player);
	var analis=audio.createAnalyser();
	var canvas=document.getElementById('canvas2');
	var ctx=canvas.getContext('2d');
	source.connect(analis);
	analis.connect(audio.destination);
	analis.fftSize=64;
	dani = new Float32Array(analis.frequencyBinCount);
	
	function draw(){ //функція яка відображає отримані дані частот на полотні canvas
		analis.getFloatFrequencyData(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();
	player.play();
}else alert('Ваш браузер не підтримує Web Audio');

if(window.AudioContext){
	var audio3 = new AudioContext();
	var player3 = document.getElementById('player3');
	var source3 = audio3.createMediaElementSource(player3);
	var analis3=audio3.createAnalyser();
	var canvas3=document.getElementById('canvas3');
	var ctx3=canvas3.getContext('2d');
	source3.connect(analis3);
	analis3.connect(audio3.destination);

	aray3 = new Float32Array(analis3.frequencyBinCount);
	
	function draw3(){ //функція яка відображає отримані дані частот на полотні canvas
		analis3.getFloatFrequencyData(aray3);
		ctx3.fillStyle='black';
		ctx3.fillRect(0, 0, canvas3.width, canvas3.height);
		ctx3.fillStyle='red';
		var w3=Math.ceil(canvas3.width/aray3.length);
		for(var i3=0,x3=0;i3<aray3.length;i3++,x3+=w3)
		ctx3.fillRect(x3, aray3[i3]*(-1.5),w3,canvas3.height);
		
		setTimeout(draw3,50);
	}
	draw3();
	player3.play();
}else alert('Ваш браузер не підтримує Web Audio');

var canvas = document.getElementById('canvas4');
var audioCtx = new AudioContext();
var audioElement = new Audio('/dani/test.mp3');
audioElement.preload = 'auto';
var audioSourceNode = audioCtx.createMediaElementSource(audioElement);

var analyserNode = audioCtx.createAnalyser();
analyserNode.fftSize = 256;
var dataArray = new Float32Array(analyserNode.frequencyBinCount);

audioSourceNode.connect(analyserNode);
analyserNode.connect(audioCtx.destination);

canvas.width = 480;
canvas.height = 150;
var canvasCtx = canvas.getContext('2d');
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

function draw(){
	analyserNode.getFloatFrequencyData(dataArray);
	canvasCtx.fillStyle = 'black';
	canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
	var barWidth = (canvas.width / dataArray.length);
	var posX=0;
	for(var i=0; i<dataArray.length; i++){
		const barHeight = (dataArray[i] + 140) * 2;
		canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)'; //змінюємо колір
		canvasCtx.fillRect(posX, canvas.height-barHeight/2, barWidth, barHeight/2);
		posX += barWidth + 1;
	}
requestAnimationFrame(draw);
};

draw();
audioElement.play();