Audio Capturing with HTML5

Audio capturing with HTML5

You might wanna have a look at HTML Media Capture and its API.

Ericsson labs already achieved this, see: here (Note: Note that the device element and the related APIs are not available in any browser yet, and the APIs may change before this happens.) But it gives you a rough idea about how it's done.

I am currently working on something like this myself, see: here.

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.

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.

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

Recording html5 audio

Here you can find my example, but it's not working (partly). Because AUDIO recording is not yet implemented to chrome. Thats why you'll get a 404 error, which is says can not find BLOB.

Also there is a form below it is because my aim was sending that BLOB to a php file, but since not working, i can't try. Save it, you may use later.

<audio></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<div></div>
<!--
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
-->

<script>
  var onFailed = function(e) {
    console.log('sorry :(', e);
  };

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream

var audio = document.querySelector('audio');
var stop = document.getElementById('stop');


    function startRecording(){
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) {
            audio.src = window.URL.createObjectURL(stream);
        document.getElementsByTagName('div')[0].innerHTML = audio.src;
            localStream = stream;
          }, onFailed);
        } else {
            alert('Unsupported');
          //audio.src = 'someaudio.ogg'; // fallback.
        }
    }



    function stopRecording(){
        localStream.stop();
        audio.play();
    }


    function sendAudio(){

    }
</script>

note: some information and howto for firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

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.

---

Related Topics