A WebGL Music Visualizer

https://github.com/zachwinter/kaleidosync

by CPLNTN • 4 years ago

65 25 4 years ago

github.com

CPLNTN• 4 years ago

For those nostalgic folks that miss music visualisers

klingt-net• 4 years ago

Back then I could run a music visualizer offline. I have no idea why this website requires me to log in to Spotify.

elaus• 4 years ago

It doesn't sync to live audio it records/grabs. It uses the Spotify API that provides rythmn/intensity mappings for most (all?) songs. So basically the web page asks the API which song you're currently playing on Spotify and what BPM it has and it renders the visualization accordingly.

Minor49er• 4 years ago

I'm running one on my TV right now through Kodi

grishka• 4 years ago

For those, there's this: https://butterchurnviz.com

It's a WebGL port of the Winamp visualizer.

sitkack• 4 years ago

https://webamp.org/

tarentel• 4 years ago

https://www.kaleidosync.com this is the actual product. Requires a spotify login though.

thih92• 4 years ago

What is the license of this project? Before looking at the code I usually want to know that in case I wanted to reuse or contribute. I didn’t find a LICENSE file or any note. Does anyone know?

withinboredom• 4 years ago

If there’s no license, all rights are reserved.

difosfor• 4 years ago

Doesn't seem to work on my iPad unfortunately.

smlacy• 4 years ago

Cute idea and great execution. The first track I tried [1] has no discernible "Beat" so it kinda just goes wild at its own tempo, a total mismatch for the music I was playing.

1. The Album Leaf https://open.spotify.com/artist/02uPe16VFxPaiueQsPEDkE

chaosprint• 4 years ago

Fantastic idea and implementation! Just FYI, it seems that in the music community, there are quite some complaints about how Spotify distributes the income for artists. I don't know the details so no further comments from me. But I think it would be great if this project can be abstracted into an indie Web Audio visualisation lib. I would be keen to try it with my project Glicol:

https://glicol.org

There I have only basic visualisation so far.

pzo• 4 years ago

Consider adding sample audio file to test features without login to Spotify - Helpful for people who are on mobile and keep passwords on desktop password managers

soylentcola• 4 years ago

...or just don't have a Spotify account.

shadeslayer• 4 years ago

It currently seems to use Spotify's audio analysis API [1], which might be hard to replace.

[1] https://developer.spotify.com/documentation/web-api/referenc...

drcongo• 4 years ago

Indeed. I remember playing with Echo Nest back in the day and being blown away by it, Spotify seemed to either completely castrate it after buying them or just don't bother using it to its full potential.

parentheses• 4 years ago

If your password manager doesn't have a mobile client, you should switch password managers.

m00dy• 4 years ago

just curious how it would look like under German techno

Kalanos• 4 years ago

.gif it up man

fleddr• 4 years ago

It visualizes something but I fail to detect the correlation with the music playing.

cobertos• 4 years ago

Syncing music from Spotify is illegal under their Developer Policy, a client wanted to do it recently and it seemed iffy that you wouldn't eventually get shut down.

Section iii, bullet 6: https://developer.spotify.com/policy/#iii-some-prohibited-ap...

k12sosse• 4 years ago

Always interesting to see some of the rules imposed by a company that started by using unlicensed MP3s from The Pirate Bay. Guess you gotta keep the record companies happy.. after you make your first couple million, that is.

sedivy94• 4 years ago

I was tearing through GitHub last year to find a project like yours. Since then, this has been the gold standard for audio-reactive visuals in the browser. I was so impressed.

asxd• 4 years ago

This is really cool. It would be nice to have a way use custom audio, but I really like the range of visualizations and the interface. (one very minor issue is that the scrollbars seem to intermittently appear on firefox when dragging sliders)

edit: It would also be cool to see the visualizer's current estimate for the BPM.

2nd edit: Is the shader code for the visualization's available anywhere?

A WebGL Music Visualizer

Related Stories