Visualizador de Ondas Sonoras com JavaScript

Para esta dica usaremos uma das muitas funcionalidades da Web Audio API do JavaScript, que é a capacidade de extrair a frequência, formas de onda e outros dados do seu arquivo de áudio e vamos usar isto para criar um visualizador de ondas sonoras básico. Para não dar problema com o Cors, execute seu código de um localhost

Iniciando

O primeiro passo é informar um arquivo de áudio.

HTML

<audio id="Audio" controls>
    <source src="SeuArquivoDeAudio.mp3" type="audio/mpeg" />
</audio>

JavaScript:

let audio = document.getElementById("Audio");

Extraindo dados de um arquivo de áudio

Agora precisamos usar o método AudioContext.createAnalyser() para criar um AnalyserNode, que vai nos permitir acessar dados como tempo e frequência do nosso arquivo de áudio.

// Audio Context
let audioCtx = new AudioContext();
// Analyser Node
let analyser = audioCtx.createAnalyser();

Depois de instanciar AudioContext e criar o AnalyserNode, vamos criar um MediaElementAudioSourceNode e conectar o nosso analyser e nosso AudioContext.destination

let source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
source.connect(audioCtx.destination);

O AnalyserNode irá pegar os dados do áudio usando a Transformada Rápida de Fourier (FFT) de um determinado domínio de frequência, dependendo do valor que iremos especificar na propriedade AnalyserNode.fftSize (o valor padrão é 2048)

Criando o Visualizador de Ondas

Vamos começar usando nosso AnalyserNode.fftSize para configurar nosso buffer

analyser.fftSize = 2048;
let bufferLength = analyser.fftSize;
let dataArray = new Uint8Array(bufferLength);

Com isso feito, vamos agora configurar o nosso canvas

HTML:

<div class="waves-container">
    <canvas id="waves-canvas"></canvas>
</div>

JavaScript:

// CAPTURANDO O CANVAS
let canvas = document.getElementById('waves-canvas');

// CONFIGURANDO O TAMANHO DO CANVAS
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 2;
let wid = canvas.width;
let hei = canvas.height;

// DEFINE A LARGURA DE CADA SEGMENTO DA LINHA 
// A SER DESENHADA, BASEADO NO fftSize
let sliceWidth = wid * 1.0 / bufferLength;

// CONFIGURANDO ESTILO DO CANVAS
canvasCtx = canvas.getContext('2d');
canvasCtx.clearRect(0, 0, wid, hei);
canvasCtx.fillStyle = '#151515';

// ESTILO DA LINHA
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(249, 251, 250)';
canvasCtx.shadowOffsetX = 1;
canvasCtx.shadowOffsetY = 1;
canvasCtx.shadowBlur = 10;
canvasCtx.shadowColor = "rgb(28, 213, 254)";

Agora vamos definir a função draw() que vai servir para desenhar as linhas do nosso visualizador.

function draw() {
    // SERÁ USADO PARA MANTER A FUNÇÃO draw() EM LOOP
    loopDraw = requestAnimationFrame(draw);
    // INSERE NO dataArray A FORMA DE ONDA
    analyser.getByteTimeDomainData(dataArray);
    // CONFIGURANDO O PREENCIMENTO E INICIO DO DESENHO
    canvasCtx.fillRect(0, 0, wid, hei);
    canvasCtx.beginPath();
}

Logo abaixo do nosso beginPath() iremos iniciar o loop que definirá a posição de pequenos segmentos de onda para cada ponto no buffer a uma certa altura com base no valor do dataArray, em seguida, moverá a linha para onde o próximo segmento será desenhado.

Deverá ficar assim:

function draw() {
    // SERÁ USADO PARA MANTER A FUNÇÃO draw() EM LOOP
    loopDraw = requestAnimationFrame(draw);
    // INSERE NO dataArray A FORMA DE ONDA
    analyser.getByteTimeDomainData(dataArray);
    // CONFIGURANDO O PREENCIMENTO 
    canvasCtx.fillRect(0, 0, wid, hei);
    // INFORMA O INICIO DO DESENHO
    canvasCtx.beginPath();
    let x = 0;
    for (let i = 0; i < bufferLength; i++) {
        let v = dataArray[i] / 128.0;
        let y = v * hei / 2;
        if (i === 0) {
            canvasCtx.moveTo(x, y);
        } else {
            canvasCtx.lineTo(x, y);
        }
        x += sliceWidth;
    }
    // MANDA A LINHA PARA O CENTRO DO CANVAS 
    canvasCtx.lineTo(canvas.width, canvas.height / 2);
    canvasCtx.stroke();
}

Depois disso fazemos a camada da função draw() logo a baixo