Estudamos vários tópicos no GitHub, Hacker News e Reddit em ferramentas de visualização de áudio. Falamos sobre as bibliotecas abertas e soluções mencionadas que são úteis para desenvolvedores de aplicativos ou jogos da Web.
Foto Pixabay / Licença Pixabay- Pizzicato . Para trabalhar com conteúdo de áudio em navegadores , é usada a especificação Web Audio , desenvolvida pelo consórcio W3C . A Web Audio API possui 28 interfaces para filtrar, visualizar e gerenciar canais de áudio. A biblioteca JavaScript do Pizzicato expande essa funcionalidade - permite adicionar mais efeitos às melodias ( tremolo , reverb , efeito de distorção quadrafuzz ) e criar novas composições com base em sons individuais. O autor da biblioteca apresentou um projeto demonstrando suas capacidades - este aplicativo reproduz uma melodia dependendo do número de confirmações de usuários do GitHub.
- Processing.js . Uma biblioteca para implementar as funções básicas da linguagem Processing. Foi desenvolvido em 2001 para visualizar dados na web. Hoje é usado por milhares de artistas, designers e desenvolvedores, inclusive para visualização de áudio . A biblioteca usa JS para animação e tela para trabalhar com imagens. Dois livros (PDF) de seus autores ajudarão a estudar os recursos do idioma - " Processamento: um manual de programação " e " Introdução ao processamento ".
- Peaks.js . Este é um componente JavaScript para exibir e interagir com gráficos de ondas sonoras. Os gráficos podem ser redimensionados e marcados com partes semânticas de cores diferentes, como fala e música. A biblioteca foi desenvolvida por especialistas da BBC, eles usaram o componente canvas do HTML5. O Peaks.js só pode desenhar gráficos com base em dados prontos e colocá-los na página do site. Se você precisar gerar uma onda sonora, poderá recorrer a outras ferramentas do ecossistema da BBC: dados da forma de onda para JS, forma de audiowave para C ++ e audio_waveform para Ruby.
Foto por Jason Corey / CC BY- p5.js. Esta é a biblioteca de visualização que a equipe de processamento criou em 2014. Ele permite que você “desenhe usando código” (crie elementos de arte e animações), onde a página no navegador atua como uma tela. O P5.js possui bibliotecas adicionais para integração com outros objetos HTML5 - texto, vídeo, áudio ou captura de imagens de uma webcam. Há um editor no site oficial do projeto no qual você pode avaliar todos os recursos da ferramenta.
- pixi.js. Um mecanismo de renderização 2D baseado em canvas e WebGL, que suporta texturas e sprites. Os autores da biblioteca o posicionam como um análogo do Three.js, por isso é adequado para criar interfaces gráficas complexas (por exemplo, tocadores de música) e visualizações. Uma demonstração com os recursos “musicais” do pixi.js pode ser encontrada no site do codepen (você precisa baixar músicas do seu computador).
- sketch.js . Uma pequena biblioteca para criar objetos de arte em JavaScript - pesa apenas dois kilobytes. Todos os métodos de desenho CanvasRenderingContext2D, WebGLRenderingContext e HTMLElement são suportados. No site oficial, você pode encontrar vários exemplos de visualizações implementadas usando o sketch. A documentação com todas as informações necessárias para iniciar a ferramenta está no GitHub .
- Two.js. API universal para desenhar em Canvas, SVG ou WebGL com uma tendência nos gráficos vetoriais. Adequado para trabalhar em um ambiente sem cabeça e na nuvem. Exemplos de implementação estão disponíveis aqui .
- Forma de onda de áudio Um aplicativo para Linux e Mac OSX (Windows ainda não é suportado) que funciona na linha de comando e gera dados de forma de onda com base em gravações de áudio (nos formatos MP3, WAV, FLAC ou OGG). Para fazer isso, o aplicativo forma uma faixa mono e calcula o valor mínimo e máximo das amostras. Os dados são salvos nos formatos JSON, dat ou PNG. Depois que eles podem ser transferidos para a biblioteca, que exibe um gráfico da onda sonora no site, por exemplo, o Peaks.js já mencionado.
Foto Pixabay / Licença Pixabay- Onda de áudio circular . Biblioteca JS que visualiza ondas sonoras na forma de um gráfico circular. Para construí-los, é utilizado o ECharts, além de dados sobre frequências e músicas de BPM . As demonstrações podem ser encontradas aqui e aqui .
- Cinder . Estrutura C ++ para geração de imagens, criada como concorrente do Processing.js. A ferramenta permite trabalhar com gráficos 2D e 3D, possui decodificadores internos para WAV, MP3 e OGG, além de funções de processamento de sinal digital (por exemplo, blocos de cálculo de normalização e RMS).
- Visualizador de música 3D . Um visualizador simples criado com base no Three.js e na API de áudio da Web, que usa funções trigonométricas para criar formas. Um exemplo de trabalho pode ser encontrado aqui . O projeto pode ser usado como referência ao criar seu próprio visualizador "matemático".
Em 18 de junho, a venda de equipamentos começa na Audiomania. Oferecemos players de vinil, amplificadores estéreo, estantes de livros e caixas de som, além de fones de ouvido com grandes descontos de até 70%. Por exemplo, os alto-falantes Polk Audio S10 podem ser adquiridos por 14.900 rublos e os fones de ouvido Audio-Technica ATH-E40 por 6.490 rublos.
Hot AUDIOSALE 2019 é uma ótima oportunidade para comprar um gadget de áudio que você assiste há muito tempo.
Nossas outras coleções:
Onde obter amostras de áudio para seus projetos: uma seleção de nove recursos temáticos 12 recursos temáticos com faixas licenciadas sob Creative Commons Uma seleção de lojas on-line com música de alta resolução
O que havia no primeiro iPod: vinte álbuns que Steve Jobs escolheu em 2001 Nós nos aposentamos - discutimos gadgets de áudio populares que já estão "desatualizados"