spectro

? Espectro

O Spectro é um gerador de espectrograma de áudio em tempo real para a web. Ele pode visualizar o som a partir de seus arquivos de microfone ou áudio no seu dispositivo.

Uso

Vá aqui para começar a usar o Spectro.

Para começar a gerar um espectrograma, você pode:

• Clique no ? Registre no botão MIC para começar a gerar um espectrograma a partir do seu microfone.

  Se você deseja gravar áudio da saída de áudio do seu dispositivo, pode ativar o 'mix estéreo' no Windows ou usar o Blackhole no macOS e definir este dispositivo como o dispositivo de entrada padrão do seu navegador.

• Clique no ? Reproduza o botão de arquivo de áudio para começar a gerar um espectrograma a partir de um arquivo de áudio no seu dispositivo. Isso também reproduzirá o arquivo de áudio selecionado.

  Qualquer formato de áudio suportado pelo seu navegador pode ser reproduzido.

O espectrograma gera da direita para a esquerda , com o áudio mais recente aparecendo à direita e mais velha à esquerda.

Também existem opções disponíveis para controlar a aparência do espectrograma:

• ? A sensibilidade controla o quão sensível o espectrograma é para o áudio. Mudar tem o mesmo efeito que alterar o volume do áudio.
• ? O contraste aplica escala logarítmica ao espectrograma para adicionar contraste à imagem. Mudar pode ajudar a produzir uma imagem melhor, dependendo do áudio que está sendo analisado.
• ? O zoom controla como o zoom no espectrograma aparece ao longo do eixo do tempo.
• ? Min. e máx. Controle de frequência A faixa de frequências a serem exibidas no espectrograma. As frequências mais baixas aparecem na parte inferior do espectrograma e frequências mais altas na parte superior.
• ? A escala de frequência controla a escala para se aplicar ao eixo de frequência do espectrograma. 'Linear' significa que todas as frequências são representadas uniformemente, enquanto 'Mel' dá uma aparência mais natural, dando mais peso a frequências mais baixas.
• ? A cor controla o esquema de cores para exibir o espectrograma.

Você pode clicar no botão ⏹ Parar para parar de gerar o espectrograma. Se a reprodução de um arquivo de áudio, o espectrograma parará automaticamente no final da faixa.

❓ FAQ

O que é um espectrograma?

Um espectrograma é uma imagem produzida a partir do som. Ele visualiza as frequências presentes no som ao longo do tempo, com o tempo representado ao longo do eixo horizontal, a frequência ao longo do eixo vertical e o volume da frequência por cor.

Por exemplo, se você gerasse um espectrograma de si mesmo assobiando, veria uma linha brilhante no tom do apito.

Com quais navegadores o Spectro trabalha?

As versões mais recentes do Chrome, Firefox e Safari funcionam com o Spectro. Qualquer outro navegador baseado em cromo, como a nova versão do Microsoft Edge, também deve funcionar.

Como funciona o Spectro?

Aqui está uma postagem no blog descrevendo tudo! Uma rápida visão geral:

• A entrada de áudio é dividida em quadros de 4096 amostras, que são sobrepostas a cada 1024 amostras. Eu escolhi o 4096 como tamanho da minha janela, pois parecia ser a melhor troca entre a resolução de tempo e frequência-eventualmente, posso torná-lo configurável.
• Esses quadros sobrepostos são então em janelas usando uma função Blackman-Harris de sete mandatos, que eu decidi, pois parecia dar a maior clareza visual.
• As janelas são executadas através de uma transformação rápida de Fourier (usando JSFFT) em um trabalhador da web dedicado, e a norma de cada compartimento de frequência é tomada como base do espectrograma.
• Esse espectrograma bruto é então inserido em uma fila circular, que tem capacidade igual à largura da imagem do espectrograma.
• Os dados do espectrograma bruto são renderizados na tela com o WebGL, usando um shader para executar rapidamente toda a escala, colorização e outros ajustes de imagem diretamente na GPU. Somente novos dados de espectrograma bruto são carregados na GPU a cada quadro para melhorar o desempenho em vez de fazer um upload completo.
• O painel de configurações usa o React e o material-UI (que explica a maior parte do tamanho do pacote?).

?desenvolvimento

Instale dependências:

 npm install

Inicie o webpack-dev-server:

 npm start

Construa um pacote de produção:

 npm run build

Execute a verificação do tipo TypeScript:

 npm run type-check

Licença

O Spectro é liberado sob os termos da licença do MIT.