How can I use recorded audio from web browser as a value in HTML form?

Question

Currently I'm making web based voice recorder which will upload the recorded audio to the server. Before upload it to server, the user need to record audio & input few fields such as audio name etc.

I'm using RecordJs from MattDiamond https://github.com/mattdiamond/Recorderjs. When a user clicks on the stop recording button, an audio player will appear and user can play it. If the user decided to use it, they will click a button to use that audio and it will be an input value to a file type input field. The code is shown as below:

var url;

function stopRecording() {
    mediaStream.stop();
    rec.stop();
    rec.exportWAV(function(e) {
        rec.clear();
        //Recorder.forceDownload(e, "test.wav");
        url = Recorder.getAudioUrl(e, "audio.wav");
        document.getElementById("audioPlayer").src = url;
        document.getElementById("audioPlayer").style.display = "";
    });
}

function setInputFile() {
    document.getElementById("filename").value = url;
} 

So far, I managed to capture the audio and play the recorded audio from my browser but I stuck at next step which is to set the recorded audio as a value to the input field. Using document.getElementById("filename").value = url; give an error. Could please anyone in the forum give any suggestion how to set it?

Answer 1

You have to create a form element for input file. For example, in function createDownloadLink() you have to add this lines

 var x = document.createElement("INPUT");
      x.setAttribute("type", "file");

After that, you have to set input value with blob url you generate in createDownloadLink() function.

x.setAttribute("value", url);

Then, you have to append the input file tag together with the list tag.

li.appendChild(x);

The full implementation is as shows below.

 function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      var x = document.createElement("INPUT");
      x.setAttribute("type", "file");
      x.setAttribute("value", url);

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      li.appendChild(x);
      recordingslist.appendChild(li);
    });
  }