A WebGL Music Visualizer | Hacker News Reader

A WebGL Music Visualizer

github.com

65 pointsCPLNTN25 comments

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

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

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...

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.

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

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://www.kaleidosync.com this is the actual product. Requires a spotify login though.

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?

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

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.

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?

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...

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.

For those nostalgic folks that miss music visualisers

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

It's a WebGL port of the Winamp visualizer.

https://webamp.org/

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

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.

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/6136f79988867...

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

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.

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

Doesn't seem to work on my iPad unfortunately.

just curious how it would look like under German techno

.gif it up man

Reply on news.ycombinator.com