Soundcloud API - Origin <mysite> is not allowed by Access-Control-Allow-Origin

Question

As a follow-up to Play playlist or track by permalink not trackid: the solution provided works fine seemingly everywhere except Safari on Mac.

On the Safari on Mac we see XMLHttpRequest cannot load http://api.soundcloud.com/playlists/.json?client_id=..., Origin is not allowed by Access-Control-Allow-Origin

This is somewhat complicated by the fact that we have embedded the JavaScript into another site (Confluence). The standalone fiddle worked fine on Safari.

From XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin I suspect the problem is something to do with jsonp, but really this is out of my expertise.

Any advice appreciated.

Thanks, Martin.

Answer 1

You can try using the JSONP approach. Here's an updated fiddle using JSONP instead of XMLHttpRequest. The main difference is in the getSoundCloudId() method and the addition of a global jsonpResponse() method.

function getSoundCloudId(permalink) {
  var jsonp   = document.createElement('script');
  var script  = document.getElementsByTagName('script')[0];
  jsonp.type  = 'text/javascript';
  jsonp.async = true;
  jsonp.src   = 'http://api.soundcloud.com/resolve.json?client_id='+CLIENT_ID 
              + '&url='+permalink+'&callback=jsonpResponse';
  script.parentNode.insertBefore(jsonp, script);
  return false;
}