2

I am trying to access soundcloud audio with the web audio API. I am using the below audio element to get the audio (and picking up from javascript with createMediaElementSource)

<audio id='stream' src="http://api.soundcloud.com/tracks/204082098/stream?client_id=MYCLIENTID" crossorigin='anonymous'></audio>

But this produces a CORS error, even though Soundcloud is meant to support CORS

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cf-media.sndcdn.com/OfjMZo27DlvH.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vT2ZqTVpvMjdEbHZILjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0MzU0MTI0NzR9fX1dfQ__&Signature=SwXVan2GT2pvaP2Db5VtpElWKcUNVJdEd1MVsvjWu1NLNyt~BPMJO2Yx1Z1vvbX3hc887sw4BabAQBqlp6UldpxK13kizR2l2PJsnMRrO9Tm-MgaoWWDNr0QdUDJeqOp8do94lriA72IwYg21dm61-onQFpuKTZGR7wlvLeiQWMWJArEC0ATj7XfAM-Dy4bCrKGMHFhd6PbkcNigkS00~oUMes~HfjYzph~tAB~EAFcjqx4LFyBM6qMWb63O1U3~-jG39YFOHfR5-VqqA7ojEugtaAlJ30eUp3ygmG9jmfUHoaq1ebU1fIWsx94KOzDEY-8psqLhrj5LjWMBLf5kLg__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ. This can be fixed by moving the resource to the same domain or enabling CORS.

Is this the correct way to access soundcloud clips from web audio api? If not what's the best way to do it?

Thanks in advance

Slidon
  • 393
  • 2
  • 3
  • 16
  • There's an SDK available, and [**documentation**](https://developers.soundcloud.com/docs#playing) – adeneo Jun 27 '15 at 13:45
  • Yes, an example is given on how to play the audio but I am unsure as how to link it up with web audio – Slidon Jun 27 '15 at 14:32

2 Answers2

7

You can do it that way:

var audio = new Audio();
audio.src = 'http://api.soundcloud.com/tracks/204082098/stream?client_id=17a992358db64d99e492326797fff3e8';
audio.controls = true;
audio.autoplay = true;
audio.crossOrigin = "anonymous";
document.body.appendChild(audio);

var context = new (window.AudioContext || window.webkitAudioContext)();

window.addEventListener('load', function(e) {
  var source = context.createMediaElementSource(audio);
  source.connect(context.destination);  
}, false);

https://jsfiddle.net/iambnz/t6Ln0424/

hwsw
  • 2,596
  • 1
  • 15
  • 19
  • 2
    if someone votes an answer down, would be great to get a notice why. – hwsw Jun 28 '15 at 10:28
  • This is helpful however I need to play live streams so cannot download first using http requests, the code I have is very similar to this but using createMediaElementSource instead which sorta breaks it. (Im not the down voter :P) – Slidon Jun 29 '15 at 10:59
  • option 1 is working for me. this is basically your code. have u tried it? well, you will always use a http request to access / download / buffer the tracks. – hwsw Jun 29 '15 at 11:50
  • Option 1 works. I was hoping to support both soundcloud as well as live audio streams from another site and very long audio files, so wanted to use createMediaElementSource instead. Here is an adjusted version of your code (which I can't get to work): https://jsfiddle.net/tujzgccp/ – Slidon Jun 29 '15 at 15:05
  • sure you can support both, normal buffersource is more flexible than a createmediaelementsource - afaik. – hwsw Jun 30 '15 at 11:09
  • Add-/removing ```audio.crossOrigin = "anonymous";``` makes or breaks it here, in terms of producing variants of the original CORS error. – jiku Oct 26 '15 at 10:38
2

I think you might be running into the same thing another poster did a while back ago. Please check my answer at SoundCloud Api redirect confusion and Audio Api Streams

tl;dr - Soundcloud seems to have disabled CORS for certain tracks, but not all. The one in your example is served from cf-media.sndcdn.com which doesn't provide the CORS headers needed.

Community
  • 1
  • 1
Oskar Eriksson
  • 2,591
  • 18
  • 32
  • Hmm ok, I did a bit of looking and didn't find a single track linking to https://ec-media.sndcdn.com. Instead every track linked to https://cf-media.sndcdn.com. Is this because I am doing something wrong or just a massive percentage of tracks have CORS disabled (if you had an example url to test would be great) – Slidon Jun 29 '15 at 11:08
  • Unfortunately, no, I don't have an example URL. It might be worth asking @fauxnoir though, since he/she seemingly has one. :) – Oskar Eriksson Jun 29 '15 at 14:30
  • Not sure about the percentage of CORS enabled tracks either. – Oskar Eriksson Jun 29 '15 at 14:32