SoundCloud Tutorials:Uploading Audio Files(AJAX)

Published on November 25, 2012

In the previous lesson of SoundCloud Tutorial Series I explained you how to upload Sounds using SoundCloud PHP-SDK. As I promised in that lesson I am writing this post. In this post I will teach you how to Upload Audio files to SoundCloud using SoundCloud PHP-SDK and AJAX.

Demo

Download

Most of us feel we are using web site not web application unless until we use ajax in it. But the problem with the AJAX we faced is its debug. Debugging Ajax little tougher then any other programming language. 1)Sound Cloud Tutorials:Getting Started 2)Sound Cloud Tutorials:Authentication 3a)Sound Cloud Tutorials:Uploading Audio Files 3b)Sound Cloud Tutorials:Uploading Audio Files(AJAX) 4)Sound Cloud Tutorials:Playing Audio Files Thought We are going to learn SoundClound Uploading Audios with AJAX, another tutorial hidden in it. That is AJAX based file uploading using HTML5. AJAX based file upload it almost impossible with XHR1. But XHR2 comes with Create Features. XHR-XMLHTTPRequest Since it is the extended version of previous lesson 3)Sound Cloud Tutorials:Uploading Audio Files , In this lesson we will discuss only the extra features in it. Compare to previous lesson in this lesson we will add the files. —ajaxupload.php —upload.js And we will do some changes to —uploadsound.php

uploadsound.php

<?php
if($_GET['access_token']){
?>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
font-family: "Comic Sans MS", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 32px;
color: #333333;
font-weight: normal;
}
.container{
width: 500px;
margin: 0 auto;
}
.logo{
text-align: center;
}
#upload_result{
border: 1px solid #cccccc;
border-radius: 4px;
padding: 0 20px 20px;
}
input[type="text"],input[type="file"] {
border: 1px solid #cccccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
outline: none;
padding: 4px 6px;
font-size: 14px;
line-height: 20px;
color: #555555;
border-radius: 3px;
width: 325px;
float: right;
}
input[type="submit"] {
display: block;
color: #fff;
font-weight: bold;
cursor: pointer;
margin: 10px 0 0 118px;
padding: 6px 10px;
border: 1px solid #777;
background: #333537;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div id="upload_result">
<p>Download this <a href="airtelbirdmix.mp3">airtelbirdmix.mp3</a>(80k) file and use it for upload if you want to test fast</p>
<form action="" method="post" enctype="multipart/form-data" id="upload_form" >
<input type="hidden" id="access_token" name="access_token" value="<?php echo $_GET['access_token']; ?>" />
<br />
Audio Name:<input type="text" id="audioname" name="audioname" placeholder="My audio" /><br /><br />
Audio File: <input type="file" name="audiofile" id="audiofile" />
<br />
<input type="submit" />
</form>
</div>
</div>
<script type="text/javascript" src="upload.js"></script>
</body>
</html>
<?php
}
else{
header("Location://techumber.com");
}
?>

ajaxupload.php

<?php
if($_POST)
{
include("config.php");
$soundcloud->setAccessToken($_POST['access_token']);

$mytrack = array(
'track[title]' => $_POST["audioname"],
'track[asset_data]' => '@'.$_FILES["audiofile"]["tmp_name"]
);

$track = json_decode($soundcloud->post('tracks', $mytrack));
echo '<p><b>Congrats your file successfully uploaded to <a target="_blank" href="'.$track->permalink_url.'">'.$track->permalink_url.'</a>';
}
?>

upload.js

(function() {
  var audio;
  var xhr;
  var audioname = document.getElementById("audioname");
  var access_token = document.getElementById("access_token").value;
  var audiofile = document.getElementById("audiofile");
  var result = document.getElementById("upload_result");
  var upload_form = document.getElementById("upload_form");
  //checks if HTML5 Files supports or not.
  if (window.File && window.FileList && window.FileReader) {
    init();
  }
  //initilizeing
  function init() {
    audiofile.addEventListener("change", getAudio, false);
    upload_form.addEventListener("submit", uploadAudio, false);
  }
  //getting audio file when selecting it
  function getAudio(e) {
    audio = this.files[0];
  }
  //main function of uploaidng file
  function uploadAudio(e) {
    result.innerHTML =
      '<p style="text-align:center"><img src="img/loading.gif"></p>';
    audioname = audioname.value;

    //Generating custom FormData HTML5
    var formData = new FormData();
    formData.append("access_token", access_token);
    formData.append("audioname", audioname);
    formData.append("audiofile", audio);
    //Createing XHR2 object
    xhr = new XMLHttpRequest();
    //triger after successful compleate request
    xhr.addEventListener(
      "load",
      function() {
        result.innerHTML = xhr.responseText;
      },
      false
    );
    xhr.open("POST", "ajaxupload.php");
    xhr.send(formData);
    e.preventDefault();
  }
})();

In this we using HTML5 XHR2 and FormData to send data to ajaxupload.php and get the uploaded URL back. since We are using Latest XHR2 and FormData both are HTML5-API, So this script will only work in HTMl5 browsers(Latest Chrome and FireFox) That’s it! Next lesson we will learn how to play sound that we had uploaded to SoundCloud.