JSMUSIC

Willian Justen / @willianjusten

As vezes eu escrevo...

willianjusten.com.br

As vezes eu faço código open source...

github.com/willianjusten

E também faço cursos online!

willianjusten.com.br/cursos

Alguns lugares que já trabalhei...

Web Audio API

Criar músicas
Colocar efeitos
Criar espacialização do audio
Criar visualizações em tempo real
Etc...

Web Audio API

Criar músicas
Colocar efeitos
Criar espacialização do audio
Criar visualizações em tempo real
Etc...

Audio Visualization

Visualizers
Digital Signal Processing (DSP)
Web Audio API

Visualizers

O que são?

São imagens geradas em tempo real baseadas num stream de data de um audio. Podendo ser determinísticos ou não-determinísticos.

Como fazer?

Exemplo Incrível

lhbzr portifólio por Luis Henrique Bizarro

Digital Signal Processing (DSP)

É uma análise e/ou modificação de sinais utilizando teoria fundamental, aplicações e algoritmos, de forma a extrair informações dos mesmos e/ou torná-los mais apropriados para alguma aplicação específica.

TL;DR

DSP

Interpretar ondas como um grande conjunto de dados.

Sample Rate / Bit Depth

Qualidade

Time and Frequency Domain

Time Domain

Frequency Domain

Web Audio API

Web Audio API Nodes

Source
Media Element
Media Stream
Oscillator
Buffer

Utility
Script Proc.
Analyzer
Channel Splitter
Channel Merger

Effect
Gain
Biquad Filter
Delay
Convolver
Compressor
WaveShaper

Web Audio API Nodes

Source
Media Element
Media Stream
Oscillator
Buffer

Utility
Script Proc.
Analyzer
Channel Splitter
Channel Merger

Effect
Gain
Biquad Filter
Delay
Convolver
Compressor
WaveShaper

"Hello World" AudioViz

Gráfico das conexões

Criando o audio

var audio = new Audio();
audio.src = 'track.mp3';
audio.loop = true;
audio.autoplay = true;
audio.crossOrigin = "anonymous";

Ligar o audio ao contexto

audioContext = new window.AudioContext();
source = audioContext.createMediaElementSource(audio);

O contexto de áudio que controla a criação dos nodes e execução do processamento de áudio.

Gráfico das conexões

Criando o analyser

analyser = audioContext.createAnalyser();
fbc_array = new Uint8Array(analyser.frequencyBinCount);

O AnalyserNode é capaz de fornecer informações sobre o frequency e o time-domain em tempo real.

Gráfico das conexões

Conectando o Analyser ao Destino

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

Mas e a parte da animação?

Criando a Animação

function frameLooper() {
    window.requestAnimationFrame(frameLooper);
    analyser.getByteFrequencyData(fbc_array);
    render();
}

Exemplo

Bars / Triangles

Quer saber mais?

bit.ly/awesome-aav

Obrigado

bit.ly/fis-av

código: frontinsp

even.tc/curso-de-svg