voronianski / soundcloud-audio.js

:musical_note: SoundCloud tracks and playlists with HTML5 Audio API
http://caniuse.com/#feat=audio
284 stars 46 forks source link

refactor: use new API authentification #34

Open alexandre-abrioux opened 2 years ago

alexandre-abrioux commented 2 years ago

Hi! First of all, thank you for creating this awesome tool!

This player works way better than the one provided by the (now deprecated) SoundCloud's Javascript SDK. I've been using your library in my project for a long time and it's been working great: https://github.com/alexandre-abrioux/soundcloud-reverse

Unfortunately, and because of the latest SoundCloud's API security update, I noticed this week that playback is not working anymore.

SoundCloud now requires an Authorization header containing an OAuth token on each request made to its API.

Furthermore it looks like legacy stream URLs like https://api.soundcloud.com/tracks/[ID]/stream are not playable anymore, because they also need this Authorization header, rendering them unusable (details bellow).

If you try to send an Authorization header to the stream with some audio tag hack (cf. this Stackoverflow thread), it won't work because those stream URLs do a 302 redirect to a CDN that won't accept the Authorization header, however the browser will send it, thus creating a CORS failure. There is no way to manually handle the redirection with xhr requests, even when using fetch's redirect=manual option, as this is a security feature from the spec.

This is why we have to use the new API endpoint /tracks/[ID]/streams (notice the s at the end of stream) to first get the CDN url and then use it as the audio source.

I'm using it now on my project and playback works again:

npm i --save https://github.com/alexandre-abrioux/soundcloud-audio.js.git#oauth

You just need to pass an OAuth token now instead of a client_id:

var player = new SoundCloudAudio(token);

TL;DR: This is a refacto of the codebase that takes into consideration the new SoundCloud API update