API Examples

Here are some examples from common questions of our users.

If you have any further questions or need any other special API features, don’t hesitate to contact us at feedback _at_ auphonic.com!

Simple Audio File Upload with JavaScript (CORS)

If you want to integrate Auphonic into your own web application, direct file uploads from your users to our servers are possible with cross-origin requests (CORS). For more details about CORS see New Tricks in XMLHttpRequest2.

If you want to upload and start a production using the Auphonic Simple API, you can create a POST request directly in JavaScript:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

function createProduction() {
  // create CORS request to Auphonic Simple API
  var xhr = new createCORSRequest("POST", "https://auphonic.com/api/simple/productions.json");
  // IMPORTANT: if you use OAuth, you must provide your bearer token here!
  //            otherwise you can also use HTTP Basic Authentication ...
  xhr.setRequestHeader("Authorization", "Bearer XXXXXXX");

  // production metadata and details
  var formData = new FormData();
  formData.append("title", "javascript upload test");
  formData.append("artist", "me");
  formData.append("loudnesstarget", -23);
  formData.append("action", "start");

  // add the media file which should be uploaded
  // the audio file must be selected in an HTML form with id files, e.g.:
  //   <input type="file" id="files" name="files[]" multiple />
  formData.append("input_file", document.querySelector('#files').files[0]);

  // submit request
  xhr.send(formData);
}

// event listener to trigger the upload when the user selects a new file
document.getElementById('files').addEventListener('change', createProduction, false);

In your HTML, you must have a corresponding file input form to make the above example working:

<input type="file" id="files" name="files[]" multiple />

For a more complex example with upload progress and multiple requests, see Complex Audio File Upload with JavaScript (CORS).

Complex Audio File Upload with JavaScript (CORS)

For full control, you might want to use our Complex JSON API. There it’s necessary to first create a production with all details and then upload a media file in a second request, see Start a Production and Upload a Local File.

Here is an example with two requests which also displays the upload progress:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

function get_token() {
  // your OAuth2 bearer token
  return 'XXXXXXX';
}

// create new production using the JSON API
// NOTE: Content-type must be application/json!
var xhr = createCORSRequest("POST", "https://auphonic.com/api/productions.json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer " + get_token());
xhr.onload = function(e) {
  console.log("Production: created");

  // parse response of first request to get the production UUID
  var response = JSON.parse(e.target.response);
  var data = response.data;
  var production_uuid = data.uuid;

  // the audio file must be selected in an HTML form with id files, e.g.:
  //   <input type="file" id="files" name="files[]" multiple />
  var file = document.querySelector('#files').files[0];

  if (file) {
    console.log("File Upload: started");

    // second request to add audio file to the production
    // IMPORTANT: we must not set the Content Type to JSON here!
    var url = 'https://auphonic.com/api/production/{uuid}/upload.json'.replace('{uuid}', production_uuid);
    var xhr2 = createCORSRequest("POST", url);
    xhr2.setRequestHeader("Authorization", "Bearer " + get_token());

    // event listener to show upload progress
    xhr2.upload.addEventListener("progress", function(e) {
      console.log((e.loaded / e.total) * 100);
    }, false);

    // callback when upload finished
    xhr2.onload = function(e) {
      console.log("File Upload: Done");
    };

    // append file to our form and send second request
    var formData = new FormData();
    formData.append('input_file', file);
    xhr2.send(formData);
  }
};

// send first request and set some production details in JSON
xhr.send(JSON.stringify({"metadata":{"title": "test upload 2"}}));