Web Audio API
Web Audio API - дозволяє відтворювати, створювати та керувати звуком, додавати звукові ефекти, створювати візуалізацію аудіо та багато іншого за допомогою JavaScript у браузері.
Об'єкт AudioContext - це основа Web Audio, який має методи для створення інших об'єктів для обробки аудіо.
- Основні об'єкти які використовуються для робити Web Audio:
- AudioContext - аудіо контекст для обробки аудіо.
- AnalyserNode - об'єкт який аналізує частоти звуку.
- AudioListener - об'єкт який вказує положення слухача звуку.
- BiquadFilterNode - фільтр звуку низького порядку
- ConvolverNode - об'єкт для створення ефекту реверберації звуку.
- GainNode - об'єкт для регулювання рівня гучності звукового сигналу.
- MediaElementAudioSourceNode - об'єкт для отримання звуку з медіа елемента.
- OscillatorNode - об'єкт для створення звукової хвилі.
- StereoPannerNode - стерео панорамування звуку.
Основні аудіо операції виконують аудіо вузли.
Не всі браузери підтримують Web Audio API.
Рекомендовано перевіряти чи підтримує браузер Web Audio API. Підтримка перевіряється за наявністю об'єкта AudioContext:
if(window.AudioContext){
alert('Ваш браузер підтримує Web Audio API');
}else alert('Не підтримується браузером Web Audio API');
Завантаження звуку за допомогою AJAX
За допомогою технології AJAX і Web Audio можна завантажити аудіо файл, декодувати методом AudioContext.decodeAudioData() та відтворити.
if(window.AudioContext){
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);
}else alert('Ваш браузер не підтримує Web Audio');
Відтворення звуку з елемента Audio
Для відтворення аудіо з елемента Audio використовується аудіо вузол MediaElementAudioSourceNode
if(window.AudioContext){
var audio=new Audio(); //створюємо елемент audio
//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');
Зміна гучності
Зміна рівня сигналу можна за допомогою аудіо вузла GainNode.
if(window.AudioContext){
var audio=new Audio(); //створюємо елемент audio
var audioCtx=new AudioContext();
var source=audioCtx.createMediaElementSource(audio); //створюємо об'єкт MediaElementAudioSourceNode
var gain=audioCtx.createGain(); //створюємо об'єкт GainNode
gain.gain.value=0.5; //вказуємо рівень гучності
audio.src='/dani/test.ogg';
source.connect(gain);
gain.connect(audioCtx.destination);
audio.play(); //починаємо відтворення
}else alert('Ваш браузер не підтримує Web Audio');
Змішування двох звуків
Змішування двох аудіо сигналів відбувається за допомогою відтворення з двох джерел.
if(window.AudioContext){
var audioCtx=new AudioContext();
var audio1=new Audio(), audio2=new Audio();
var source1=audioCtx.createMediaElementSource(audio1), source2=audioCtx.createMediaElementSource(audio2);
audio1.src="/dani/test.ogg";
audio2.src="/dani/test2.mp3"; //браузер має підтримувати файл mp3
source1.connect(audioCtx.destination);
source2.connect(audioCtx.destination);
audio1.play();
audio2.play();
}else alert('Ваш браузер не підтрмує Web Audio');
Також можна змінювати гучність кожного джерела окремо підключивши їх до окремого аудіо вузла GainNode.
if(window.AudioContext){
var audioCtx=new AudioContext();
var audio1=new Audio(), audio2=new Audio();
var source1=audioCtx.createMediaElementSource(audio1), source2=audioCtx.createMediaElementSource(audio2);
var gain1=audioCtx.createGain(), gain2=audioCtx.createGain();
audio1.src="/dani/test.ogg";
audio2.src="/dani/test2.mp3"; ////браузер повинен підтримувати файл mp3
source1.connect(gain1);
source2.connect(gain2);
gain1.connect(audioCtx.destination);
gain2.connect(audioCtx.destination);
gain1.gain.value=0.2;
gain2.gain.value=0.8;
audio1.play();
audio2.play();
}else alert('Ваш браузер не підтримує Web Audio');
Візуалізація
Візуалізація аудіо звуку
Для того щоб створити візуалізацію звуку на полотні canvas використовується об'єкт AnalyserNode для аналізації звукового сигналу.
<canvas id="canvas2" width="600" height="400"></canvas>
if(window.AudioContext){
audio = new AudioContext();
player = new Audio();
player.src='/dani/test.ogg';
source = audio.createMediaElementSource(player);
analis=audio.createAnalyser(); //створюємо об'єкт AnalyserNode
canvas=document.getElementById('canvas2');
ctx=canvas.getContext('2d');
source.connect(analis);
analis.connect(audio.destination);
analis.fftSize=128;
dani = new Uint8Array(analis.frequencyBinCount);
draw=function(){ //функція яка показує отримані дані частот на полотні canvas
analis.getByteTimeDomainData(dani);
ctx.fillStyle='black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth=2;
ctx.strokeStyle='#757272';
ctx.beginPath();
var w=canvas.width/dani.length;
var h=canvas.height*0.25;
ctx.moveTo(x,dani[i-2]);
for(var i=1,x=0;i<dani.length;i++,x+=w){
ctx.lineTo(x,h+dani[i]);
}
ctx.lineTo(x+w,h+dani[i-2]);
ctx.stroke();
setTimeout(draw,50); //або requestAnimationFrame(draw)
}
draw();
player.play();
}else alert('Ваш браузер не підтримує Web Audio');
Фільтр звука низького порядку
Для фільтрації аудіо звуку через фільтр низького порядку використовується об'єкт BiquadFilterNode.
if(window.AudioContext){
var player = new Audio();
player.src='/dani/test.ogg';
var audio = new AudioContext();
var source = audio.createMediaElementSource(player);
var biqFiltr=audio.createBiquadFilter(); //створюємо об'єкт BiquadFilterNode
source.connect(biqFiltr);
biqFiltr.connect(audio.destination);
biqFiltr.type='bandpass';
biqFiltr.detune.value=50;
biqFiltr.gain.value=15;
biqFiltr.Q.value=10;
biqFiltr.frequency.value=250;
player.play(); //включаємо відтворення
}else alert('Ваш браузер не підтримує Web Audio');
Створення звуку
Створення звуку відбувається за допомогою об'єкта OscillatorNode.
if(window.AudioContext){
oscillator={audioCtx:new AudioContext()};
oscillator.gain=oscillator.audioCtx.createGain()
oscillator.gain.connect(oscillator.audioCtx.destination);
oscillator.play=function(hz){
this.oscillator=this.audioCtx.createOscillator();
this.gain.gain.value=1;
this.oscillator.connect(this.gain);
this.oscillator.frequency.value=hz;
this.oscillator.start(this.audioCtx.currentTime);
this.oscillator.stop(this.audioCtx.currentTime+0.5);
}
oscillator.play(50); //приклад відтворення звуку на 50Hz
}else alert('Ваш браузер не підтримує Web Audio');