first post here! I'm kind of a noob in JS but I'm working to improve. So, I'm building this audio visualizer using vanilla JS. I still need to work on the CSS but I'm satisfied with it right now - It can decently visualize FFT data for a preloaded song (taken from Free Music Archive)
I now want to connect a streaming service like Spotify to the visualizer so that the music from the streaming service is visualized. But I'm not exactly sure how to go about doing that. I'm using the Web Audio API to analyze the sound.
I would really appreciate it if someone could provide some direction in going about this, thank you!
Note: Site DOES NOT work on mobile yet, sorry.
Spotify uses Encrypted Media Source Extensions (see Building Spotify's New Web Player) and I'm not sure if they openly let us access their protected music. Would be great if they do and anyone can find out how. Media Source Extensions is a good option for feeding encoded audio (Opus, MP3, etc) chunks to <audio> programmatically for the browser to decode them. I would consider investigating music services that provide free music like BandCamp or Soundcloud.
MSE container support varies by browser, and you can check with
MediaSource.isTypeSupported('audio/webm; codecs="opus"');
MediaSource.isTypeSupported('audio/aac; codecs="opus"');
MediaSource.isTypeSupported('audio/mp4; codecs="opus"');