AudioContext - аудіо контекст для обробки аудіо.
audio = new AudioContext();
audio - зміна якій присвоюється об'єкт AudioContext.
AudioContext об'єкт аудіо-обробки, побудований з "звукових модулів", з'єднаних через аудіо вузлів.
AudioContext контролює як створення аудіо вузлів, що містяться в ньому, так і виконання обробки звуку або декодування. Потрібно створити AudioContext, перш ніж робити щось інше, оскільки все відбувається всередині аудіо контексту.
AudioContext являє собою аудіограф, AudioDestinationNode який спрямовується в пристрій виведення в реальному часі, який виробляє сигнал, спрямований на користувача. У більшості випадків AudioContext використання для кожного документа використовується лише один.
var audioCtx = new AudioContext();
alert( audioCtx );
Відтворення аудіо з елемента audio за допомогою аудіо вузла MediaElementAudioSourceNode:
if(window.AudioContext){
var audio=new Audio(); //створюємо елемент audio
var audioCtx=new AudioContext();
var source=audioCtx.createMediaElementSource(audio); //створюємо об'єкт MediaElementAudioSourceNode
audio.src='/dani/test.ogg';
source.connect(audioCtx.destination);
audio.play();
}else alert('Ваш браузер не підтримує Web Audio');
<audio id="audio" src="/dani/test.ogg"></audio>
if(window.AudioContext){
var audio=document.getElementById('audio'); //отримуємо елемент
var audioCtx=new AudioContext();
var source=audioCtx.createMediaElementSource(audio); //створюємо об'єкт MediaElementAudioSourceNode
audio.src='/dani/test.ogg';
source.connect(audioCtx.destination);
audio.play();
}else alert('Ваш браузер не підтримує Web Audio');
Візуалізація аудіо звуку з елемента audio за допомогою об'єкта AnalyserNode:
if(window.AudioContext){
var audio = new AudioContext();
var player = new Audio(); //створюємо елемент audio
var source = audio.createMediaElementSource(player);
var analis=audio.createAnalyser();
var canvas=document.getElementById('canvas'); //елемент canvas
var ctx=canvas.getContext('2d');
player.src='/dani/test.ogg';
source.connect(analis);
analis.connect(audio.destination);
analis.minDecibels=-80;
analis.maxDecibels=-10;
analis.fftSize=32;
dani = new Uint8Array(analis.frequencyBinCount);
function draw(){ //функція яка відображає отримані дані частот на полотні 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');
Відтворюємо аудіо файл завантажений за допомогою AJAX і декодований за допомогою AudioContext.decodeAudioData():
var ajax=new XMLHttpRequest();
var audioCtx=new AudioContext();
var source=audioCtx.createBufferSource();
source.connect(audioCtx.destination);
ajax.open('get', '/dani/test.ogg', true);
ajax.responseType='arraybuffer';
ajax.onload=function(){
audioCtx.decodeAudioData(this.response, function(decodedata){
source.buffer=decodedata;
source.start(); //починаємо відтворення
}, function(eror){alert('Виникла помилка при декодуванні: '+eror.message);});
};
ajax.send(null);