Open libraries for visualizing audio content

We studied several thematic threads on GitHub, Hacker News and Reddit, dedicated to tools for visualizing audio content. We talk about the frequently mentioned open libraries and solutions that will be 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 recording channels. Library for JavaScript Pizzicato expands this functionality - it allows 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 Library for the implementation of the basic functions of the language Processing. It was developed in 2001 for data visualization on the web. Today, it is used by thousands of artists, designers and developers, including for visualizing audio . For animation the library uses JS, and for work with images - canvas. Two books (PDF) from its authors - " Processing: A Programming Handbook " and " Getting Started with Processing " will help to study the features of the language.
• Peaks.js This is a JavaScript component for displaying and interacting with sound wave graphs. Charts can be scaled and color-coded with different semantic parts, such as speech and music. The library was developed by experts from the BBC, they used the HTML5 canvas component. Peaks.js can only draw graphs from already prepared 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 artistic elements and animations), where the canvas is a page in the browser. P5.js has additional libraries for integration with other HTML5 objects - text, video, audio, or image capture from a webcam. On the official website of the project there is an editor in which you can evaluate all the features of the tool.
• pixi.js A canvas and WebGL-based 2D rendering engine that 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 site (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 CanvasRenderingContext2D, WebGLRenderingContext and HTMLElement drawing methods are supported. On the official website you can find several examples of visualizations implemented using sketch. 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 work in the headless environment and the cloud. Examples of implementations are available here .
• Audio Waveform . 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 recording (in MP3, WAV, FLAC or OGG formats). To do this, the application creates a mono track, and then calculates the minimum and maximum value of the samples. Data is saved in JSON, dat or PNG format. After they can be transferred to the library, which will display 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 a circular graph. ECharts are used to build them, as well as frequency data and BPM tones. Demo versions can be found here and here .
• Cinder . The 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, blocks for normalizing and calculating RMS values).
• 3D Music Visualizer . A simple visualizer built on the basis of Three.js and a Web Audio API that 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.

---

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



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

---

Our other selections:



Where to get audio samples for your projects: a selection of nine thematic resources

12 thematic resources with tracks under Creative Commons license

A selection of online stores with hi-res music

What was on the first iPod: twenty albums that Steve Jobs chose in 2001

Retired - we are discussing once popular audio gadgets that are already “out of date”

---