ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 142
Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 129
Abonament PDF

Web Audio API

Ovidiu Mățan
Fondator @ Today Software Magazine



PROGRAMARE


Web Audio API este un framework care permite programatorilor dar și artiștilor să realizeze aplicații web care valorifică puterea de procesare nativă. Se pot mixa surse de sunet diverse, aplica diferite efecte audio și se pot crea vizualizări, osciloscoape virtuale și multe altele. În rândurile de mai jos vom arăta că folosirea Web Audio API este relativ simplă, permițându-ne, totodată, să realizăm o serie de aplicații interesante.

Un prim sunet

Folosim un osciloscop virtual căruia îi vom schimba frecvențele de la 0 la 1000, cărora le vom adăuga o valoare de offset, pentru a obține o reprezentare mai bună. Putem selecta și tipul de undă utilizat de osciloscop. În funcție de acesta, obținem efecte destul de neobișnuite și autentice.

Așa cum se poate vedea în codul de mai jos, începem prin instanțierea contextului audio și crearea oscilatorului. Odată pornit prin metoda start(), schimbarea valorii frecvenței sau a tipului semnalului oscilatorului va fi reflectată în sunetul reprodus. La final, metoda stop() va opri sunetul.

let audioContext = 
 new AudioContext();

const types=["sawtooth" , "sine" , 
 "square" , "triangle"];

async function play() {
 let oscillator = audioContext
  .createOscillator();

  oscillator.connect(
   audioContext.destination);

  oscillator.start();
  for (const type of types) {
   for (let i=0;i<3;i++){
    await playFrequencies(
    oscillator,i*600, type)
   }
  }
  oscillator.stop();
}

async function playFrequencies(oscillator, offset, 
type){
  oscillator.type=type;
  for (let i = 0; i < 1000; i+=10)   
  {
   oscillator.frequency.value = 
   offset+i;

     await sleep(20);
 }
}
play()

Conectarea mai multor surse

În următorul exemplu, vom produce sunetele fiecărui generator în paralel. Pentru aceasta am folosit metoda connect() pentru conectarea unei surse la difuzorul calculatorului: audioContext.destination.

async function play() {

  for (const type of types) {
   for (let i = 0; i < 3; i++) {          
    playFrequencies(audioContext, 
    i * 600, type)
    }
  }
}

async function playFrequencies(audioContext, 
offset, type){

  let oscillator = audioContext
   .createOscillator();

  oscillator.start();
  oscillator.connect(audioContext
  .destination);

  oscillator.type=type;
  for (let i = 0; i < 1000; i+=10) 
  {
    oscillator.frequency.value = 
    offset+i;

    await sleep(20);
  }
  oscillator.stop();
}

Aplauze

De multe ori, în timpul evenimentelor online ne-am dorit să putem aplauda. Folosind Web Audio API putem rula așa cum am văzut în exemplul anterior mai multe surse simultan. O soluție practică ar implica și o comunicare WebSocket prin care să transmitem direct aplauzele participanților.

function play2(url){
    const audio=new Audio();
    audio.src=url;
    audio.autoplay=true
    document.body
    .appendChild(audio);
  let source=audioContext.createMediaElementSource(
  audio);

  source.connect(audioContext.destination);
}

play2("/res/Applause02.mp3");
play2("/res/Applause_OCP-1048-60.wav");
play2("/res/HUMAN_CROWD_Applause_Short_01.wav");

În exemplul de mai sus, utilizăm pagina web existentă pentru crearea unor noduri Audio pentru fiecare fișier audio rulat. Aplauzele sunt rulate simultan, de unde reiese și un efect de scenă garantat.

Mai tare dacă se poate

Nimic mai simplu. În exemplul de mai sus, vom intercala un nod ce controlează volumul între sursa sunetului și sistemul de sunet (audioContext.destiation).

let audioContext = new AudioContext();
const gainNode=new GainNode(audioContext);
gainNode.gain.value=5;
....

source.connect(gainNode).connect(audioContext
.destination);

Nodul gainValue poate avea următoarele valori:

Filtrele audio

Folosim metoda BaseAudioContext.createBiquadFilter pentru a crea un nod audio BiquadFilterNode. Valorile tipului de filtru pot fi următoarele: "allpass", "bandpass", "highpass", "highshelf", "lowpass", "lowshelf", "notch", "peaking"

let audioContext = new AudioContext();
const gainNode=new GainNode(audioContext);
gainNode.gain.value=1;

let filter = audioContext.createBiquadFilter();
filter.type = "lowpass";

function play2(url){
    const audio=new Audio();
    audio.src=url;
    audio.autoplay=true
    document.body.appendChild(audio);
    let source=audioContext
     .createMediaElementSource(audio);

source.connect(gainNode)
.connect(filter)
.connect(audioContext.destination);
}

play2("/res/Vocal_Pop_Logo.mp3");

Efecte speciale

Utilizăm un efect de pan prin care vom controla în ce parte a sistemului stereo se aude sunetul. Rezultatul dorit este să treacă sunetul dintr-o boxă în cealaltă. Folosim un nod StereoPannerNode căruia îi modificăm valoarea pan. Codul complet îl puteți vedea mai jos:

let audioContext = new AudioContext();
const gainNode=new GainNode(audioContext);
gainNode.gain.value=1;

let filter = audioContext.createBiquadFilter();
filter.type = "notch";

let stereoPanner = audioContext.createStereoPanner();
async function play2(url){
    const audio=new Audio();
    audio.src=url;
    audio.autoplay=true
    document.body.appendChild(audio);
    let source=audioContext
    .createMediaElementSource(audio);

    source.connect(gainNode)
    .connect(filter)
    .connect(stereoPanner)
    .connect(audioContext.destination);

    let i=-1;
    let step=0.1;
    while (true){
        stereoPanner.pan.value=i;
        await sleep(200)
        i+=step;
        if (i<-0.9 || i>0.9 ) step=-step;
    }
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, 
    ms));
}

play2("/res/Vocal_Pop_Logo.mp3");

Concluzie

Web Audio API este un framework puternic care ne permite să controlăm profesionist sunetul într-o aplicație web. Am expus doar câteva operații de bază, deoarece aria de aplicare este mult mai mare și ar putea include elemente de vizualizare, mixere audio sau controlul sunetului într-o aplicație WebRTC.

Conferință

NUMĂRUL 142 - Robotics & AI

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • Yardi
  • P3 group
  • Ing Hubs
  • Colors in projects

INTERVIURI VIDEO