401 api.soundcloud.com/{track_urn}/streams/<uuid>/hls #478
Description
Using client authentication flow
fetch(
'https://api.soundcloud.com/tracks/<track_urn>/streams,
{
headers: {
'Authorization': 'Bearer <access_token>',
'Accept: '*/*',
}
}
)
const response =
{
hls_aac_160_url: "https://api.soundcloud.com/tracks/{track_urn}/streams/<uuid>/hls"
hls_mp3_128_url: "https://api.soundcloud.com/tracks/{track_urn}/streams/<uuid>/hls"
...
}
const element = new Audio();
element.crossOrigin = 'anonymous';;
element.controls = false;
element.src = response.hls_mp3_128_url
element.load();
I used to take the hls_mp3_128_url directly from the response above and set the source of an Audio HTML element directly but now getting a 401 unauthorized. I believe up to today the https://api.soundcloud.com/tracks/<track_urn>/streams used to return the actual streamable url (cf-hls-media.sndcdn.com?params) with more query string params for the authentication, but now the tracks/<track_urn>/streams url does not.
I can add my access token as an authorization header, make a fetch to grab the actual audio data stream url before adding to the Audio Element as a src URL but then running into cors issues on safari.
--get actual audio data stream url
const response = fetch(
'https://api.soundcloud.com/tracks/{track_urn}/streams/<uuid>/hls',
{
headers: {
'Authorization': 'Bearer <access_token>',
'Accept: '*/*',
}
}
)
--take above response and plug that directly into, fails on safari
const element = new Audio();
element.crossOrigin = 'anonymous';;
element.controls = false;
element.src = response.url
element.load();