✨ This project has evolved into vizz.fm! ✨

It's been completely rewritten using Three.js/WebGL for next-gen real-time 3D music visualization. This repo is kept around for reference but is no longer actively maintained.

Party Mode

An experimental browser music visualizer built in 2014 with d3.js and the Web Audio API. It draws SVG in real time from the frequency data of an HTML5 audio element. If you landed here looking for something to actually use, go to vizz.fm.

---

Looking for a browser music visualizer you can use right now?

Use vizz.fm. It is free, runs entirely in the browser, and requires no account, no download, and no plugins. Open the page, connect audio, and it reacts in real time.

What it does:

• WebGL visualizers with dozens of built-in variants, each exposing its own controls for color, speed, intensity, and geometry
• Audio controls for gain, noise gating, bass attenuation, and spectrum remapping, so you can shape how a scene hears the music
• Over 30 stackable post-processing effects including kaleidoscope, bloom, CRT, ASCII, pixelate, glitch, and tilt-shift
• Presets you can save locally and share with a link
• Runs full screen for capture in OBS, with an option to pop the controls out into a separate window

How do I visualize audio from Spotify, YouTube, or another app?

In Chrome, Edge, or Brave you can share audio from any application and the visualizer reacts to the direct feed of whatever is playing. There is a walkthrough at vizz.fm/blog/screen-share-audio, and per-app guides:

Source	Guide
Spotify	https://vizz.fm/spotify-visualizer/
YouTube	https://vizz.fm/youtube-visualizer/
Apple Music	https://vizz.fm/apple-music-visualizer/
SoundCloud	https://vizz.fm/soundcloud-visualizer/
Amazon Music	https://vizz.fm/amazon-music-visualizer/
Tidal	https://vizz.fm/tidal-visualizer/

If you would rather route audio in at the OS level, the virtual audio device setup is documented at vizz.fm/blog/system-audio.

What audio sources work?

Your microphone, local files (MP3, WAV, FLAC, and others), stream URLs, or your system audio captured via screen sharing. Everything is processed in the browser. No audio is uploaded to a server.

Which browsers are supported?

Chrome on Mac and Edge on Windows are the best experience. Firefox, Opera, and Brave all work well. Safari has performance issues rendering WebGL. Only Chrome, Edge, and Brave can capture system audio directly.

Does it work on a phone?

Yes, though it is much better on a computer. Some visualizers are graphically intensive and benefit from a real GPU.

Is it free?

Yes. No account, no email, no signup.

Can I use it for streaming, DJing, or a party?

That is what most people use it for. There are notes on each at streaming, DJs, and parties.

What changed between Party Mode and vizz.fm

	Party Mode (2014)	vizz.fm (current)
Rendering	SVG via d3.js	WebGL via Three.js
Visualizers	8 fixed styles (circle, chop, icosahedron, grid, equal, spin, hexbin, voronoi)	WebGL scenes with dozens of variants, each fully controllable
Audio input	Local MP3 drag and drop, microphone	Files, microphone, stream URLs, system audio, screen share
Effects	CSS color themes	Over 30 stackable post-processing effects
Presets	None	Save locally, share by link
Status	No longer maintained	Actively developed

Party Mode is open source under the license below. vizz.fm is not currently open source.

---

The original project

Everything below is the original 2014 README, preserved as written.

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

• D3, and bl.ocks #7782500, #3795048, #4248145, #4248146
• Code Theory
• DevelopPHP
• Michael Gerhaeuser
• Los Techies
• Codrops [1] [2]
• ColourLovers [1] [2] [3] [4] [5]
• aronwoost
• Dustin Cartwright
• Ceaser
• Headphones by Kevin Hipke and Record by Juan Pablo Bravo from The Noun Project
• Stack Overflow
• Mousetrap.js and jQuery
• aadsm/JavaScript-ID3-Reader
• Eric Bidelman via HTML5 Rocks
• icomoon (iconmelon, fontello, and iconmonstr are all pretty rad)

examples

• https://preziotte.com/partymode
• https://preziotte.com/odesza (Featured on Odesza's official Youtube channel)

cool gifs

license

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