All Projects â†’ preziotte â†’ Party Mode

preziotte / Party Mode

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Party Mode

Just Dashboard
📊 📋 Dashboards using YAML or JSON files
Stars: ✭ 1,511 (+118.99%)
Mutual labels:  data-visualization, d3, d3js
D3
This is the repository for my course, Learning Data Visualization with D3.js on LinkedIn Learning and Lynda.com.
Stars: ✭ 64 (-90.72%)
Mutual labels:  data-visualization, d3, d3js
D3 Audio Spectrum
Spectrum analysis demo using D3 and HTML5 audio
Stars: ✭ 101 (-85.36%)
Mutual labels:  audio, d3, d3js
Dex
Dex : The Data Explorer -- A data visualization tool written in Java/Groovy/JavaFX capable of powerful ETL and publishing web visualizations.
Stars: ✭ 1,238 (+79.42%)
Mutual labels:  data-visualization, d3, d3js
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-68.84%)
Mutual labels:  data-visualization, d3, d3js
Plotly Graphing Library For Matlab
Plotly Graphing Library for MATLAB®
Stars: ✭ 234 (-66.09%)
Mutual labels:  data-visualization, d3, d3js
Awesome Creative Coding
Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
Stars: ✭ 8,696 (+1160.29%)
Mutual labels:  generative-art, art, data-visualization
D3 Extended
Extends D3 with some common jQuery functions and more
Stars: ✭ 269 (-61.01%)
Mutual labels:  d3, d3js
Victory Chart
Chart Component for Victory
Stars: ✭ 286 (-58.55%)
Mutual labels:  data-visualization, d3
Context Free
Context Free is a program that generates images from written instructions called a grammar. The program follows the instructions in a few seconds to create images that can contain millions of shapes.
Stars: ✭ 326 (-52.75%)
Mutual labels:  generative-art, art
Spectro
🎶 Real-time audio spectrogram generator for the web
Stars: ✭ 383 (-44.49%)
Mutual labels:  audio-visualizer, audio
Floweaver
View flow data as Sankey diagrams
Stars: ✭ 266 (-61.45%)
Mutual labels:  data-visualization, d3
game of life-elixir
An implementation of Conway's Game of Life in Elixir
Stars: ✭ 22 (-96.81%)
Mutual labels:  d3, d3js
Carbon Charts
📊 📈⠀Robust dataviz framework implemented using D3 & typescript
Stars: ✭ 287 (-58.41%)
Mutual labels:  d3, d3js
glitch-image
🖼 Generate and save unique glitchy images
Stars: ✭ 46 (-93.33%)
Mutual labels:  art, generative-art
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: ✭ 3,688 (+434.49%)
Mutual labels:  data-visualization, d3
billboard
🎤 Lyrics/associated NLP data for Billboard's Top 100, 1950-2015.
Stars: ✭ 53 (-92.32%)
Mutual labels:  d3, d3js
Flutter D Art
Generative d.Art with Flutter
Stars: ✭ 356 (-48.41%)
Mutual labels:  generative-art, art
Ngx Charts
📊 Declarative Charting Framework for Angular
Stars: ✭ 4,057 (+487.97%)
Mutual labels:  d3, d3js
Weir
A system for making generative systems
Stars: ✭ 451 (-34.64%)
Mutual labels:  generative-art, art

An audio visualizer experiment for the browser. Powered by d3.js and the web audio api. Runs best in Chrome. Working demo @ https://preziotte.com/partymode. Try dragging in an mp3 from your desktop!

epilepsy warning

running it locally

There will be issues running this app locally without a server. I recommend cding into the directory and running http-server from the command line. If you don't have this command, install it like so: npm install -g http-server.

a somewhat-technical overview

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. <html class='theme_1'>. 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.

Mousetrap.js handles my keyboard shortcuts brilliantly, and jQuery made life easier.

I developed this primarily in Chrome. Other modern browsers still have some interesting issues (see known issues). I've found that WebKit seems to have the most competent implementation of SVG. And specifically Chrome seems to play the nicest with the html5 audio element. For my purposes at least. Running this can easily strain my four year old MacBook's CPU, but I think I'm pushing several things beyond what they were intended for with this thing. Not complaining.

Markup lies in index.html, javascript is in js/main.js and style in css/style.css. I can go into more detail if there's demand for it.

ideas

  • make it a chrome extension -- hijack audio from any page and overlay visualizer. would have to sandbox it in an iframe and then pass audio data into it..
  • make it a chrome app -- since performance seems to be better when files are local
  • auto-detect big changes in song (amplitude deltas / allow rate limiting / average threshold over time if desired) to trigger arbitrary things
  • hook up more 3rd party music service such as spotify / pandora
  • auto detect all mp3s in local folder and display a playlist (chromes webkitRequestFileSystem?)

help & inspiration

examples

cool gifs










license

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. For commercial projects, please inquire [email protected].

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].