Html5 Record Audio to File

HTML5 record audio to file

There is a fairly complete recording demo available at: http://webaudiodemos.appspot.com/AudioRecorder/index.html

It allows you to record audio in the browser, then gives you the option to export and download what you've recorded.

You can view the source of that page to find links to the javascript, but to summarize, there's a Recorder object that contains an exportWAV method, and a forceDownload method.

Record Audio on Website that works on all browsers and iOS

I found a technique that finally worked on Chrome, Firefox, and iOS Safari. There is an issue with getUserMedia in Safari though but I'm looking into that now.

https://github.com/GersonRosales/Record-Audios-and-Videos-with-getUserMedia

Record Audio Using the Users Microphone with HTML5

I have recently implemented a similar task you are trying to achieve using similar resources. You havent indicated that you need the audio uploaded as an mp3, so I am going to just show you how to upload a wav using recorderjs, using the source found here: https://github.com/cwilso/AudioRecorder

First things to note, recorderjs stores the uncompressed wav in a var called blob. This happens on line 101 of recorder js, more specifically in this function:

worker.onmessage = function(e){
  var blob = e.data;
  currCallback(blob);
}

The problem is that blob is locally declared in that function. We need to use it again, so for the sake of this example lets make it really easy to reach and make it global. So declare a variable blob outside of recorder js like so:

var blob = null;

Then modify the above function in recorderjs to store the data inside the globally declared 'blob' variable, the function should look like so:

worker.onmessage = function(e){
  blob = e.data;
  currCallback(blob);
}

Now we can use 'blob'. Now declare the following function somewhere,

function uploadAudio(){
        var fd = new FormData();
        var wavName = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
        console.log("wavName = " + wavName);
        fd.append('fname', wavName);
        fd.append('data', blob);
        $.ajax({
            type: 'POST',
            url: 'upload.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            //console.log(data);
            log.innerHTML += "\n" + data;
        });
}

Your server side code should use this:

<?php
if(!is_dir("recordings")){
    $res = mkdir("recordings",0777); 
}
move_uploaded_file($_FILES["file"]["tmp_name"],
  $res . $_FILES["file"]["fname"]);
?>

Note: $_FILES["file"]["tmp_name"] is what it sounds like. A temporary location of the file. This is done for you with the ajax call and form data.

Good luck, let me know if you run into problems.

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

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);
    });
  }

HTML5 Audio recording too large

Does the HTML5 getUserMedia export only to .WAV files ?

getUserMedia doesn't export anything at all. getUserMedia only returns a MediaStream for some sort of audio/video capture.

This MediaStream is used in conjunction with the Web Audio API where you can access PCM samples. WAV files typically contain raw PCM samples. (WAV is a container format. PCM is the sample format, and is the most popular way of encoding audio digitally.)

Zipping the file - Doesn't work well and has some security issues.

It works just fine when you consider the constraints and has no inherent security issues. In this case, you're getting a lossless compression of audio data. Characteristics of something like that are compression that won't reduce the size by more than 15%-30% or so.

Converting to MP3 - Makes the process much slower and complicated, also has security issues, and causes the sound to lose alot of quality.

You can encode as you record so slowness isn't a problem. Complicated... maybe at first but not really once you've used it. The issue here is that you're concerned about quality loss.

Unfortunately, you don't get to pick perfect quality and tiny size. These are tradeoffs and there is no magic bullet. Any lossy compression you use (like MP3, AAC, Opus, Vorbis) will reduce your data size considerably by removing part of the audio that we don't normally perceive. The less bandwidth there is, the more artifacts occur from this process. You have to decide between data size and quality.

If I might make a suggestion... Use the MediaRecorder API. https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API It's a very easy API to use. You create a MediaRecorder, give it a stream, tell it to record, and then deal with the data it gives you in whatever way you wish. Most browsers supporting the MediaRecorder API also support Opus for an audio codec, which provides good performance at most any bitrate. You can choose the bitrate you want and know that you're getting about the best quality audio you can get for that amount of bandwidth.

HTML5 Audio Recording

Can you please try with this HTML:

https://raw.githubusercontent.com/mattdiamond/Recorderjs/master/examples/example_simple_exportwav.html

and this JS:

https://raw.githubusercontent.com/mattdiamond/Recorderjs/master/dist/recorder.js

This have no save button either. But it will show the status of the JS.

The example is taken from the official repo of recorderJS (https://github.com/mattdiamond/Recorderjs).

I think you missed some script from your example.

---

Related Topics