Stream music from streaming platform (Deezer, Spotify, Soundcloud) to Web Audio API

Question

Do any of you, know a way to get the audio stream of a music platform and plug it to the Web Audio API ?

I am doing a music visualizer based on the Web Audio API. It currently reads sounds from the mic of my computer and process a real-time visualization. If I play music loud enough, my viz works !

But now I'd like to move on and only read the sound coming from my computer, so that the visualization render only to the music and no other sound such as people chatting. I know I can buffer MP3 file in that API and it would work perfectly. But in 2020, streaming music is very common, via Deezer, Spotify, Souncloud etc.

I know they all have an API but they often offer an SDK where you cannot really do more than "play" music. There is no easy access to the stream of audio data. Maybe I am wrong and that is why I ask your help.

Thanks

Answer 1

The way to stream music to WebAudio is to use a MediaElementAudioSourceNode or MediaStreamAudioSourceNode. However, these nodes will output zero unless you're allowed to access the data. This means you have to set the CORS property correctly on your end and also requires the server to allow the access through CORS.

A google search will help with setting up CORS. But many sites won't allow access unless you have the right permissions. Then you are out of luck.

Answer 2

I find a "no-code" work around. At least on Ubuntu 18.04, I am able to tell Firefox to take my speakers as the "microphone input".

You just have to select the good "mic" in the list when your browser asks for mic permission.

That solution is very convenient since I do not need to write platform-specific binding-code to access to the audio stream