So i visualització (I)

Què és la Web Audio API?

La Web Audio API és una potent eina integrada als navegadors per crear, processar i analitzar àudio. No necessita cap biblioteca externa i és totalment compatible amb p5.js v2.3.0.

Amb ella podem:

• Generar tons purs amb oscil·ladors (OscillatorNode).
• Controlar el volum amb guanys (GainNode).
• Analitzar freqüències amb AnalyserNode.
• Connectar-ho tot a un AudioContext (el "llenç sonor").

Primer so: oscil·lador + guany

Creem un AudioContext, un OscillatorNode (genera una ona sonora) i un GainNode (controla el volum). Ho connectem: oscil·lador → guany → altaveus.

let ctx, osc, gain;

function setup() {
  createCanvas(300, 120);
  ctx = new AudioContext();            // context d'àudio
  osc = ctx.createOscillator();        // oscil·lador
  gain = ctx.createGain();             // control de volum
  osc.connect(gain);                   // oscil·lador -> guany
  gain.connect(ctx.destination);       // guany -> altaveus
  osc.frequency.value = 440;           // freqüència (Hz)
  gain.gain.value = 0.1;               // volum (0-1)
  osc.start();                         // engega el so
}

Ratolí → freqüència i volum

Podem mapejar mouseX a la freqüència i mouseY al volum, creant un instrument visual.

function draw() {
  let freq = map(mouseX, 0, width, 100, 1000);
  let vol = map(mouseY, 0, height, 0.3, 0);
  osc.frequency.value = freq;
  gain.gain.value = vol;
  // indicador visual
  ellipse(mouseX, mouseY, 15, 15);
}

Analitzar i visualitzar el so

Amb un AnalyserNode podem obtenir les dades d'amplitud (volum) en temps real i dibuixar-les. Connectem l'oscil·lador al AnalyserNode i aquest al GainNode.

let anal = ctx.createAnalyser();
osc.connect(anal);   // oscil·lador -> analitzador
anal.connect(gain);  // analitzador -> guany

function draw() {
  let dataArray = new Uint8Array(anal.frequencyBinCount);
  anal.getByteTimeDomainData(dataArray); // forma d'ona
  beginShape();
  for (let i = 0; i < dataArray.length; i++) {
    let x = map(i, 0, dataArray.length, 0, width);
    let y = map(dataArray[i], 0, 255, height, 0);
    vertex(x, y);
  }
  endShape();
}

Exemples creatius pas a pas

let sum = 0;
for (let i = 0; i < dataArray.length; i++) sum += abs(dataArray[i] - 128);
let avg = sum / dataArray.length;
let r = map(avg, 0, 32, 10, 150);
ellipse(width/2, height/2, r, r);

anal.fftSize = 128;
let dataArray = new Uint8Array(anal.frequencyBinCount);
anal.getByteFrequencyData(dataArray);
for (let i = 0; i < bufferLength; i++) {
  let barHeight = map(dataArray[i], 0, 255, 0, height);
  rect(i*barWidth, height-barHeight, barWidth-1, barHeight);
}

Consells per treballar amb Web Audio API

• L'ÀudioContext es crea un sol cop dins de setup() i es reutilitza.
• El so ha de ser iniciat per l'usuari en molts navegadors. Crida ctx.resume() dins d'un event (clic, tecla) si el so no s'activa automàticament.
• Utilitza oscil·ladors de diferents formes: osc.type = 'sine' (sinusoïdal), 'square', 'sawtooth', 'triangle'.
• Per a silenci: gain.gain.value = 0. Per a so: valors entre 0 i 1.
• Practica amb la visualització de l'espectre: és la base del Tema 16 (FFT).