Audioman June 17, 2019 at 11:55

Open libraries for visualization of audio content

We studied several subject threads on GitHub, Hacker News, and Reddit on audio visualization tools. We talk about the often mentioned open libraries and solutions that are useful to developers of web applications or games. ^Photo^Pixabay^{/ Pixabay License}

Pizzicato . To work with audio content in browsers, the Web Audio specification, developed by the W3C consortium , is used . The Web Audio API has 28 interfaces for filtering, visualizing and managing audio channels. The Pizzicato JavaScript library expands this functionality by allowing you to add more effects to melodies ( tremolo , reverb , quadrafuzz distortion effect ) and create new compositions based on individual sounds. The author of the library presented a project demonstrating its capabilities - this application plays a melody depending on the number of commits of GitHub users.
Processing.js . A library for implementing the basic functions of the Processing language. It was developed in 2001 to visualize data on the web. Today it is used by thousands of artists, designers and developers, including for audio visualization . The library uses JS for animation, and canvas for working with images. Two books (PDF) from its authors will help to study the features of the language - " Processing: A Programming Handbook " and " Getting Started with Processing ".
Peaks.js . This is a JavaScript component for displaying and interacting with sound wave graphs. Charts can be scaled and marked on them with different color semantic parts, such as speech and music. The library was developed by experts from the BBC, they used the canvas component from HTML5. Peaks.js can only draw graphs based on ready-made data and place them on the site page. If you need to generate a sound wave, you can turn to other tools from the BBC ecosystem: waveform-data for JS, audiowaveform for C ++ and audio_waveform for Ruby.

^{Photo by Jason Corey / CC BY}

p5.js . This is the visualization library that the Processing team created in 2014. It allows you to “draw using code” (create art elements and animations), where the page in the browser acts as a canvas. P5.js has additional libraries for integration with other HTML5 objects - text, video, audio, or capturing images from a webcam. There is an editor on the project’s official websitein which you can evaluate all the features of the tool.
pixi.js . A 2D rendering engine based on canvas and WebGL, which supports textures and sprites. The authors of the library position it as an analogue of Three.js, so it is suitable for creating complex graphical interfaces (for example, music players) and visualizations. A demo with the “musical” features of pixi.js can be found on the codepen website (you need to download music from your computer).
sketch.js . A tiny library for creating art objects in JavaScript - it weighs only two kilobytes. All drawing methods CanvasRenderingContext2D, WebGLRenderingContext and HTMLElement are supported. On the official site you can find several examples of visualizations implemented using sketch. The documentation with all the necessary information to get started with the tool is on GitHub .
Two.js . Universal API for drawing in Canvas, SVG or WebGL with a bias in vector graphics. Suitable for working in a headless environment and the cloud. Implementation examples are available here .
The Waveform the Audio . An application for Linux and Mac OSX (Windows is not yet supported) that works from the command line and generates waveform data based on audio recordings (in MP3, WAV, FLAC or OGG formats). To do this, the application forms a mono track, and then calculates the minimum and maximum value of the samples. Data is saved in JSON, dat or PNG formats. After they can be transferred to the library, which displays a graph of the sound wave on the site, for example, the already mentioned Peaks.js.

^{Photo Pixabay / Pixabay License}

Circular Audio Wave . JS-library that visualizes sound waves in the form of a circular graph. To build them, ECharts is used, as well as data on frequencies and BPM tunes. Demos can be found here and here .
Cinder . C ++ framework for image generation, which was created as a competitor for Processing.js. The tool allows you to work with both 2D and 3D graphics, has built-in decoders for WAV, MP3 and OGG, as well as digital signal processing functions (for example, normalization blocks and calculation of rms values).
3D Music Visualizer . A simple visualizer built on the basis of Three.js and the Web Audio API, which uses trigonometric functions to create shapes. An example of work can be found here . The project can be used as a reference when creating your own "mathematical" visualizer.

On June 18, the sale of equipment starts at Audiomania. We give vinyl players, stereo amplifiers, bookshelf and floor speakers, as well as in-ear headphones with big discounts of up to 70%. For example, the Polk Audio S10 speakers can be picked up for 14,900 rubles, and the Audio-Technica ATH-E40 headphones for 6,490 rubles.

Hot AUDIOSALE 2019 is a great opportunity to buy an audio gadget that you have been watching for a long time.

Our other collections: