Try it out at https://www.kaleidosync.com!
The Echo Nest, before their acquisition by Spotify, represented the comprehensive algorithmic analysis of music. Each song within Spotify's track analysis API has been meticulously pre-analyzed: broken up into individual beats, segments, tatums, bars, and sections. With some clever elbow grease, it's possible to leverage these values with enough granularity to create meaningful visual experiences.
Since then, moving beyond the Echo Nest: I've developed a suite of tooling for realtime audio analysis, right in the browser: on any device.
this one's actually kaleidosync.com, y'all
- Introduces the infrastructure for a Web3-native, realtime creative coding platform – supporting Spotify, Audius, Radio Paradise, KEXP, and more. Working on / coming soon: ShaderToy interoperability, our first browser extension, realtime creative coding events, educational workshops, and more.
_~ frustrated apple noises ~_
- Introduces dev mode, allowing live-editing of shaders and the creation of editable uniforms.
- Complete re-write.
- Sketches have been removed from the codebase and are now stored in a database.
- New architecture connects directly with my visualizer authoring tools, enabling the publishing of new visualizers with the push of a button.
- Leverages the Spotify Web Playback SDK (when available), and falls back to legacy polling in browsers that are unsupported.
- Cleanup / bug fixes.
- There are now 8 visualizers to choose from.
- Reduces the complexity of adding new visualizers.
- Reverts back to the traditional polling when running the dev server.
- Surfaces a control interface for WebGL scenes.
- There are now 7 visualizers to choose from.
- Refactor / rate limit debugging.
- There are now 6 visualizers to choose from.
- Major refactor.
- There are now 5 visualizers to choose from.
- Includes an interface for rendering fragment shaders.
- Project backbone has been abstracted away into its own library, spotify-viz.
- Adoped @vue/cli for the UI layer.
- There are now 4 visualizers to choose from.
- User settings now persist when revisiting the site.
- More graceful error handling and authentication flow.
- This project now fully represents what's hosted on www.kaleidosync.com, instead of the bare-bones implementation that it was before.
- Complete refactor with no front end dependencies.
- Transitioned to webpack from gulp.
- Reactive data store using ES6 Proxies, semi-inspired by Vuex.
- (Hopefully) less spaghetti and more comments.
- Re-implemented with
requestAnimationFrame() - Now mobile-friendly, even on older devices.
- Improved tweening.
- Adjusts itself on window resize.
- More accurate syncing with Spotify, including automatic self-correction.
- Holy shit, it's working... kind of.