AnalyserNode - об'єкт який аналізує частоти звуку.
var Analyse = AudioContext.createAnalyser();
Analyse - змінна якій присвоюється об'єкт AnalyserNode.
AudioContext - об'єкт AudioContext
AnalyserNode об'єкт який представляє собою аудіо вузол для аналізу частоти звуку. Використовується для візуалізації адіо звуку.
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 не підтримує Ваш браузер"); };