Estudiamos varios temas en GitHub, Hacker News y Reddit en herramientas de visualización de audio. Hablamos de las bibliotecas y soluciones abiertas a menudo mencionadas que son útiles para los desarrolladores de aplicaciones web o juegos.
Licencia de Photo Pixabay / Pixabay- Pizzicato Para trabajar con contenido de audio en navegadores , se utiliza la especificación Web Audio , desarrollada por el consorcio W3C . La API de audio web tiene 28 interfaces para filtrar, visualizar y administrar canales de audio. La biblioteca JavaScript de Pizzicato amplía esta funcionalidad al permitirle agregar más efectos a las melodías ( trémolo , reverberación , efecto de distorsión quadrafuzz ) y crear nuevas composiciones basadas en sonidos individuales. El autor de la biblioteca presentó un proyecto que demuestra sus capacidades : esta aplicación reproduce una melodía dependiendo del número de confirmaciones de los usuarios de GitHub.
- Processing.js . Una biblioteca para implementar las funciones básicas del lenguaje de procesamiento. Fue desarrollado en 2001 para visualizar datos en la web. Hoy es utilizado por miles de artistas, diseñadores y desarrolladores, incluso para la visualización de audio . La biblioteca usa JS para animación y lienzo para trabajar con imágenes. Dos libros (PDF) de sus autores ayudarán a estudiar las características del lenguaje: " Procesamiento: un manual de programación " y " Introducción al procesamiento ".
- Peaks.js . Este es un componente de JavaScript para mostrar e interactuar con gráficos de ondas de sonido. Los gráficos se pueden escalar y marcar en ellos con partes semánticas de diferentes colores, como voz y música. La biblioteca fue desarrollada por expertos de la BBC, utilizaron el componente de lienzo de HTML5. Peaks.js solo puede dibujar gráficos basados en datos listos para usar y colocarlos en la página del sitio. Si necesita generar una onda de sonido, puede recurrir a otras herramientas del ecosistema de la BBC: datos de forma de onda para JS, audiowaveform para C ++ y audio_waveform para Ruby.
Foto de Jason Corey / CC BY- p5.js. Esta es la biblioteca de visualización que el equipo de procesamiento creó en 2014. Le permite "dibujar usando código" (crear elementos de arte y animaciones), donde la página en el navegador actúa como un lienzo. P5.js tiene bibliotecas adicionales para la integración con otros objetos HTML5: texto, video, audio o captura de imágenes desde una cámara web. Hay un editor en el sitio web oficial del proyecto en el que puede evaluar todas las características de la herramienta.
- pixi.js. Un motor de renderizado 2D basado en lienzo y WebGL, que admite texturas y sprites. Los autores de la biblioteca lo posicionan como un análogo de Three.js, por lo que es adecuado para crear interfaces gráficas complejas (por ejemplo, reproductores de música) y visualizaciones. Puede encontrar una demostración con las características "musicales" de pixi.js en el sitio web de codepen (necesita descargar música de su computadora).
- sketch.js . Una pequeña biblioteca para crear objetos de arte en JavaScript: pesa solo dos kilobytes. Todos los métodos de dibujo CanvasRenderingContext2D, WebGLRenderingContext y HTMLElement son compatibles. En el sitio oficial , puede encontrar varios ejemplos de visualizaciones implementadas mediante croquis. La documentación con toda la información necesaria para comenzar con la herramienta está en GitHub .
- Two.js. API universal para dibujar en Canvas, SVG o WebGL con un sesgo en los gráficos vectoriales. Adecuado para trabajar en un entorno sin cabeza y en la nube. Los ejemplos de implementación están disponibles aquí .
- Forma de onda de audio Una aplicación para Linux y Mac OSX (Windows aún no es compatible) que funciona desde la línea de comandos y genera datos de forma de onda basados en grabaciones de audio (en formatos MP3, WAV, FLAC u OGG). Para hacer esto, la aplicación forma una pista mono y luego calcula el valor mínimo y máximo de las muestras. Los datos se guardan en formatos JSON, dat o PNG. Después de que puedan transferirse a una biblioteca que muestra un gráfico de la onda de sonido en el sitio, por ejemplo, los ya mencionados Peaks.js.
Licencia de Photo Pixabay / Pixabay- Onda de audio circular . Biblioteca JS que visualiza ondas de sonido en forma de gráfico circular. Para construirlos, se utiliza ECharts, así como datos sobre frecuencias y melodías BPM . Las demostraciones se pueden encontrar aquí y aquí .
- Ceniza Marco C ++ para la generación de imágenes, que se creó como un competidor para Processing.js. La herramienta le permite trabajar con gráficos 2D y 3D, tiene decodificadores incorporados para WAV, MP3 y OGG, así como funciones de procesamiento de señal digital (por ejemplo, bloques de normalización y cálculo de RMS).
- Visualizador de música 3D . Un visualizador simple creado sobre la base de Three.js y la API de audio web, que utiliza funciones trigonométricas para crear formas. Un ejemplo de trabajo se puede encontrar aquí . El proyecto se puede utilizar como referencia al crear su propio visualizador "matemático".
El 18 de junio comienza la venta de equipos en Audiomania. Ofrecemos reproductores de vinilo, amplificadores estéreo, estantería y altavoces de piso, así como auriculares internos con grandes descuentos de hasta el 70%. Por ejemplo, los altavoces Polk Audio S10 se pueden recoger por 14,900 rublos, y los auriculares Audio-Technica ATH-E40 por 6,490 rublos.
Hot AUDIOSALE 2019 es una gran oportunidad para comprar un dispositivo de audio que has estado viendo durante mucho tiempo.
Nuestras otras colecciones:
Dónde obtener muestras de audio para sus proyectos: una selección de nueve recursos temáticos 12 recursos temáticos con pistas bajo licencia Creative Commons Una selección de tiendas en línea con música de alta resolución.
Lo que había en el primer iPod: veinte álbumes que Steve Jobs eligió en 2001 Nos retiramos, hablamos de dispositivos de audio que alguna vez fueron populares y que ya están "desactualizados"