Web Audio API

Web Audio API - дозволяє відтворювати, створювати та керувати звуком, додавати звукові ефекти, створювати візуалізацію аудіо та багато іншого за допомогою JavaScript у браузері.

Об'єкт AudioContext - це основа Web Audio, який має методи для створення інших об'єктів для обробки аудіо.

Основні аудіо операції виконують аудіо вузли.

Не всі браузери підтримують 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');