I have long been thinking about exploring audio in web-browsers combined with visuals. I realized this probably wasn't a unique idea, but I slowly started looking at Web Audio API sadly realizing that yet again Microsft fails this, but at-least Edge has support. (HTML5 Audio isn't the same but has a bit more support)
So I thought of using Web Audio API with something like Three.js for the visuals, but I also found the excellent Howler.js that has automatic fallback for unsupported browsers. While browsing around the Internet I stumbled upon clubber. This is an amazing library that can be used to collect the sounds/notes in the sound played and have it "measured" in different ways so you can use it for whatever you would like.
How to use it (for audio reactive visualizations)
It is pretty well explained at their GitHub-page but here is what I did. I used the code in their examples to build some neat stuff. I could have used music from SoundCloud but instead I downloaded a local file. I also used GLSL shaders from the amazing ShaderToys. Easy as that! Well almost, the shaders has to be modified so they react to the music. This is the bit clubber helps out with by giving you the data from the sound, measurements in numbers.
Start by clicking the "Play demo" button below. Switch shaders with the buttons or press key 1-3. When your ears start bleeding, click Silent for that sweet silence. (or use the Audio-controls)
[Tested with the latest browsers FireFox, Chrome, Edge, Safari and Android/Chrome. It might not work for you though!]
[1-3] switch shader