AnalyserNode.getByteFrequencyData() - копіює поточні дані частот звуку у масив Uint8Array.
AnalyserNode.getByteFrequencyData(array);
AnalyserNode - об'єкти AnalyserNode.
array - змінна, масив типу Uint8Array в який буде скопійовані дані частот звуку.
getByteFrequencyData() метод об'єкта AnalyserNode який копіює поточні дані про частоти звуку в масив Uint8Array.
Якщо в масиві менше елементів ніж AnalyserNode.frequencyBinCount тоді надлишкові елементи будуть скинуті.
Якщо масив має більше елементів ніж AnalyserNode.frequencyBinCount то ді надлишкові елементи будуть ігноруватися.
Дані в масиві про частоту знаходяться в діапазоні від 0 до 255.
Якщо потрібна менш висока продуктивність і більша точність використовуйте метод AnalyserNode.getFloatFrequencyData().
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 Uint8Array(analis.frequencyBinCount);
function draw(){
analis.getByteFrequencyData(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.minDecibels=-80;
analis.maxDecibels=-10;
analis.fftSize=64;
dani = new Uint8Array(analis.frequencyBinCount);
function draw(){ //функція яка відображає отримані дані частот на полотні canvas
analis.getByteFrequencyData(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,canvas.height-dani[i]/2,w,canvas.height);
setTimeout(draw,50);
}
draw();
player.play();
}else alert('Ваш браузер не підтримує Web Audio');