title: Record Audio Using the Users Microphone with HTML5
body: <p>I am very close to having a little project of mine done, however, I have run into a slight problem I cannot seem to figure out on my own. What I ultimately want to do is record a user's voice from the users microphone, and then upload the recording to my server when they are done. I am using the code from this project: <a href="https://github.com/cwilso/AudioRecorder" rel="noreferrer">https://github.com/cwilso/AudioRecorder</a></p>
  
  <p>It works great, but I am needing to add a feature that it does not include out of the box. I need to be able to upload the file to my server after the recording has finished. With the default code, the file can be downloaded locally to my computer, but not uploaded. So I did some research and I came across another similar project that has the uploading feature. However, the rest of the project is more buggy in my opinion. So I tried adding the "uploading code" from the following project: <a href="https://github.com/nusofthq/Recordmp3js" rel="noreferrer">https://github.com/nusofthq/Recordmp3js</a></p>
  
  <p><strong>Javascript code:</strong></p>
  
  <pre><code>function uploadAudio(mp3Data){
      var reader = new FileReader();
      reader.onload = function(event){
          var fd = new FormData();
          var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
          console.log("mp3name = " + mp3Name);
          fd.append('fname', mp3Name);
          fd.append('data', event.target.result);
          $.ajax({
              type: 'POST',
              url: 'upload.php',
              data: fd,
              processData: false,
              contentType: false
          }).done(function(data) {
              //console.log(data);
              log.innerHTML += "\n" + data;
          });
      };      
      reader.readAsDataURL(mp3Data);
  }
  </code></pre>
  
  <p><strong>PHP code:</strong></p>
  
  <pre><code>&lt;?php
  if(!is_dir("recordings")){
      $res = mkdir("recordings",0777); 
  }
  
  // pull the raw binary data from the POST array
  $data = substr($_POST['data'], strpos($_POST['data'], ",") + 1);
  $filename = urldecode($_POST['fname']);
  
  // write the data out to the file
  $fp = fopen('recordings/'.$filename, 'wb');
  fwrite($fp, $decodedData);
  fclose($fp);
  ?&gt;
  </code></pre>
  
  <p>I have tried combining this code to the project located at <a href="https://github.com/cwilso/AudioRecorder" rel="noreferrer">https://github.com/cwilso/AudioRecorder</a>, but to no avail. What do I need to change in the Javascript code above and where do I need to place it? Any help is greatly appreciated!</p>
  
  <p>PS: I know this only works in Chrome, FireFox, and Opera.</p>