How do I make a cross-domain request for binary data?

Question

I'm making a web application using the HTML5 audio API which need mp3 files from another domain,

I wrote this to load mp3 as arraybuffer , but this can't load files from another domain.

makeSound.prototype.load = function(callback) {
  var request = new XMLHttpRequest();
  var that = this;
  request.open("GET", this.url, true);
  request.responseType = "arraybuffer";
  request.onload = function() {
    that.buffer = that.context.createBuffer(request.response, true);
    that.reload();
    callback(request.response);
  }
  request.send();
}

And since the data is binary, I can't work out a way to request it as JSONP.

Is there any workaround?

Answer 1

If you have control over the remote domain you could convert the data to be BASE64 encoded and then use JSONP. As an alternative you could configure CORS on the remote domain.

And if you do not have access over the remote domain you could setup a server side script on your domain that will act as a bridge between your domain and the remote domain. You will then send the AJAX request to your own script which in turn will simply delegate the HTTP request to the remote domain, fetch the binary data and return it to the client without modification.