party-mode - An experimental music visualizer using d3.js and the web audio api.

  •        132

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. . This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

https://preziotte.com/partymode
https://github.com/preziotte/party-mode

Tags
Implementation
License
Platform

   




Related Projects

awesome-creative-coding - 🎨 Creative Coding: Generative Art, Data visualization, Interaction Design, Resources

  •    HTML

Carefully curated list of awesome creative coding resources primarily for beginners/intermediates. Creative coding is a different discipline than programming systems. The goal is to create something expressive instead of something functional. Interaction design, information visualization and generative art are all different types of creative coding – which has become a household term describing artworks articulated as code.

EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier

  •    Javascript

EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to manipulate and animate graphics. It also provides a robust interactive model for mouse and touch interactions.It is excellent for building games, generative art, ads, data visualization, and other highly graphical experiences. It works well alone, or with the rest of the CreateJS suite: SoundJS, PreloadJS, and TweenJS.

WPF Sound Visualization Library

  •    WPF

The WPF Sound Visualization Library is a collection of WPF Controls for graphically displaying data related to sound processing. Current controls include a Spectrum Analyzer, Waveform Timeline, and an Album Art Display Panel.

FDWaveformView - Reads an audio file and displays the waveform

  •    Swift

FDWaveformView is an easy way to display an audio waveform in your app. It is a nice visualization to show a playing audio file or to select a position in a file. To use it, add an FDWaveformView using Interface Builder or programmatically and then just load your audio as per this example. Note: if your audio file does not have file extension, see this SO question.

essentia - C++ library for audio and music analysis, description and synthesis, including Python bindings

  •    Jupyter

Essentia is an open-source C++ library for audio analysis and audio-based music information retrieval released under the Affero GPL license. It contains an extensive collection of reusable algorithms which implement audio input/output functionality, standard digital signal processing blocks, statistical characterization of data, and a large set of spectral, temporal, tonal and high-level music descriptors. The library is also wrapped in Python and includes a number of predefined executable extractors for the available music descriptors, which facilitates its use for fast prototyping and allows setting up research experiments very rapidly. Furthermore, it includes a Vamp plugin to be used with Sonic Visualiser for visualization purposes. Essentia is designed with a focus on the robustness of the provided music descriptors and is optimized in terms of the computational cost of the algorithms. The provided functionality, specifically the music descriptors included in-the-box and signal processing algorithms, is easily expandable and allows for both research experiments and development of large-scale industrial applications. If you use example extractors (located in src/examples), or your own code employing Essentia algorithms to compute descriptors, you should be aware of possible incompatibilities when using different versions of Essentia.


reaviz - 📊 Data visualization library for React based on D3

  •    TypeScript

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

Free Audio Reader

  •    

Free Audio Reader is a Windows audio player featuring bookmarks (position and optionally volume), playlists, tag editing, tag-based file/folder renaming, cover art, jukebox, slide shows, soundbites and TextReader with limited Text-To-Speech. Accessibility guidelines are follow...

ngx-graph - Graph visualization library for angular

  •    TypeScript

This library is focused on handling graph data (anything with nodes and edges) rather than chart data. Currently the only visualization uses the Dagre layout, which is specialized for directed graphs. The plan is to implement multiple visualisations for graph data within this same library. Eventually, ngx-charts-force-directed-graph may be imported into this library as another option to visualize your graph data. ngx-graph is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

CineFX - Professional grade media player

  •    C++

Cinefx is a professional grade media player, based on the jahplayer, that is capable of playing uncompressed video and image sequences at resolutions as high as 2K and 4K in real-time. Cinefx is an offline playback, editing, encoding, animation and visual effects tool based on the Jahshaka technology that allows you to create professional digital media on your desktop. Use the tools that hollywood uses to create blockbuster films and special effects.

dancer.js - high-level audio API, designed to make sweet visualizations

  •    Javascript

dancer.js is a high-level audio API, usable with both Mozilla's Audio Data API and Web Audio API with flash fallback, designed to make sweet visualizations. All controls return this. If provided an audio element as the source, one can also control the audio through that, or can access the audio element in the audio property on the dancer instance.

waud - Web Audio Library

  •    Haxe

Web Audio Library with HTML5 audio fallback. Waud is a simple and powerful web audio library that allows you to go beyond HTML5's <audio> tag and easily take advantage of Web Audio API. It abstracts Web Audio API making it consistent and reliable across multiple platforms and browsers. It also falls back to HTML5 Audio on non-modern browsers where Web Audio API is not supported.

buzz - Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element

  •    Javascript

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It tries to degrade properly on non-modern browsers. Please don't edit files in the dist subdirectory as it is generated via Grunt. You'll find source code in the src subdirectory! Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.

awesome-audio-visualization - A curated list about Audio Visualization.

  •    Shell

Music visualization, a feature found in electronic music visualizers and media player software, generates animated imagery based on a piece of music. The imagery is usually generated and rendered in real time and in a way synchronized with the music as it is played. Your contributions are always welcome! Click here to read the guidelines.

wavesurfer.js - Navigable waveform built on Web Audio and Canvas

  •    Javascript

Interactive navigable audio visualization using Web Audio and Canvas. See a tutorial and examples on wavesurfer-js.org.

howler.js - Javascript audio library for the modern web

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

tensorboard - Standalone TensorBoard for visualizing in deep learning

  •    Python

TensorBoard is a suite of web applications for inspecting and understanding your TensorFlow runs and graphs. TensorBoard currently supports five visualizations: scalars, images, audio, histograms, and the graph.This README gives an overview of key concepts in TensorBoard, as well as how to interpret the visualizations TensorBoard provides. For an in-depth example of using TensorBoard, see the tutorial: TensorBoard: Visualizing Learning. For in-depth information on the Graph Visualizer, see this tutorial: TensorBoard: Graph Visualization.

howler.js - Javascript audio library for the modern web.

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms. Additional information, live demos and a user showcase are available at howlerjs.com.

puddletag

  •    Python

SImple, powerful audio tagger for GNU/Linux

raw - The missing link between spreadsheets and data visualization

  •    Javascript

RAWGraphs is an open web tool to create custom vector-based visualizations on top of the amazing d3.js library by Mike Bostock. It has been developed by DensityDesign Research Lab (Politecnico di Milano) and Calibro, and sustained through a corporate stewardship by ContactLab. Primarily conceived as a tool for designers and vis geeks, RAWGraphs aims at providing a missing link between spreadsheet applications (e.g. Microsoft Excel, Apple Numbers, Google Docs, OpenRefine, …) and vector graphics editors (e.g. Adobe Illustrator, Inkscape, …).