Example Audio Recording

HTML

<div class="jumbotron">
  <div class="container">
    <h1>Automatic Guitar Music Transcription</h1>
  </div>
</div>
<div class="container">
  <p class="lead">Upload your audio file below:</p>
  <form method="POST" action="/" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="submit" />
  </form>
</div>

<h1>Or record your audio here!</h1>
<div id="audio">
  <p>
    <button id=startRecord onclick="startRecording()">Start</button>
    <button id=stopRecord onclick="stopRecording()">Stop</button>
  </p>
  <p>
    <audio id=recordedAudio></audio>
  </p>
  <p>
    <a id=audioDownload></a>
  </p>
</div>

JavaScript

navigator.mediaDevices.getUserMedia({
    audio: true
  })
  .then(stream => {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
      audio.push(e.data);
      if (rec.state == "inactive") {
        let blob = new Blob(audio, {
          type: 'audio/x-mpeg-3'
        });
        recordedAudio.src = URL.createObjectURL(blob);
        recordedAudio.controls = true;
        audioDownload.href = recordedAudio.src;
        audioDownload.download = 'audio.mp3';
        audioDownload.innerHTML = 'Download';
        submit(blob);
      }
    }
  })
  .catch(e => console.log(e));

// TODO: This needs work. Submit button currently does not do anything.
// Also, page does not get reloaded and therefore the results are not shown.
// The POST request has to be done without AJAX.

function startRecording() {
  startRecord.disabled = true;
  stopRecord.disabled = false;
  audio = [];
  recordedAudio.controls = false;
  rec.start();
}

function stopRecording() {
  startRecord.disabled = false;
  stopRecord.disabled = true;
  rec.stop();
}

function submit(blob) {
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {
    var fd = new FormData();
    base64data = reader.result;
    console.log(base64data);
    fd.append('file', base64data, 'audio.mp3');
    $.ajax({
      type: 'POST',
      url: '/',
      data: fd,
      cache: false,
      processData: false,
      contentType: false,
      enctype: 'multipart/form-data'
    }).done(function(data) {
      console.log(data);
    });
  }
}