5 ms·

A WebGL Music Visualizer

65 points by CPLNTN 4y ago

sedivy94 4y 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.
CPLNTN 4y ago
For those nostalgic folks that miss music visualisers
- klingt-net 4y 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 4y 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.
    - thih9 4y ago
      Also: > In the future I'm going to tap into Spotify listening history so I can surface music recommendations and other features. See: https://github.com/zachwinter/kaleidosync/blob/6136f799888670013f71b36b2c00c7c237320c45/src/views/Privacy.vue https://github.com/zachwinter/kaleidosync/blob/6136f79988867...
- Minor49er 4y ago
  I'm running one on my TV right now through Kodi
- grishka 4y ago
  For those, there's this: https://butterchurnviz.com https://butterchurnviz.com It's a WebGL port of the Winamp visualizer.
  - sitkack 4y ago
    https://webamp.org/ https://webamp.org/
tarentel 4y ago
https://www.kaleidosync.com https://www.kaleidosync.com this is the actual product. Requires a spotify login though.
thih9 4y 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 4y ago
  If there’s no license, all rights are reserved.
difosfor 4y ago
Doesn't seem to work on my iPad unfortunately.
smlacy 4y 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 https://open.spotify.com/artist/02uPe16VFxPaiueQsPEDkE
chaosprint 4y 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 https://glicol.org There I have only basic visualisation so far.
pzo 4y 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 4y ago
  ...or just don't have a Spotify account.
- shadeslayer 4y 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/reference/#/operations/get-audio-analysis https://developer.spotify.com/documentation/web-api/referenc...
  - drcongo 4y 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 4y ago
  If your password manager doesn't have a mobile client, you should switch password managers.
m00dy 4y ago
just curious how it would look like under German techno
Kalanos 4y ago
.gif it up man
deleted 4y ago
[deleted]
fleddr 4y ago
It visualizes something but I fail to detect the correlation with the music playing.
cobertos 4y 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-applications https://developer.spotify.com/policy/#iii-some-prohibited-ap...
- k12sosse 4y 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.
asxd 4y 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?

65 points by CPLNTN 4y 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.

CPLNTN 4y ago

For those nostalgic folks that miss music visualisers

klingt-net 4y 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 4y 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.
  - thih9 4y ago
    Also: > In the future I'm going to tap into Spotify listening history so I can surface music recommendations and other features. See: https://github.com/zachwinter/kaleidosync/blob/6136f799888670013f71b36b2c00c7c237320c45/src/views/Privacy.vue https://github.com/zachwinter/kaleidosync/blob/6136f79988867...
Minor49er 4y ago
I'm running one on my TV right now through Kodi
grishka 4y ago
For those, there's this: https://butterchurnviz.com https://butterchurnviz.com It's a WebGL port of the Winamp visualizer.
- sitkack 4y ago
  https://webamp.org/ https://webamp.org/

tarentel 4y ago

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

thih9 4y 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 4y ago
If there’s no license, all rights are reserved.

difosfor 4y ago

Doesn't seem to work on my iPad unfortunately.

smlacy 4y 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 https://open.spotify.com/artist/02uPe16VFxPaiueQsPEDkE

chaosprint 4y 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 https://glicol.org There I have only basic visualisation so far.

pzo 4y 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 4y ago
...or just don't have a Spotify account.
shadeslayer 4y 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/reference/#/operations/get-audio-analysis https://developer.spotify.com/documentation/web-api/referenc...
- drcongo 4y 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 4y ago
If your password manager doesn't have a mobile client, you should switch password managers.

m00dy 4y ago

just curious how it would look like under German techno

Kalanos 4y ago

.gif it up man

deleted 4y ago

[deleted]

fleddr 4y ago

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

cobertos 4y 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-applications https://developer.spotify.com/policy/#iii-some-prohibited-ap...

k12sosse 4y 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.

asxd 4y 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?