How can I record a user's voice using Javascript/PHP? [closed]

Question

I am currently trying to make a test site that allows users to record voice-notes and save it to their account. What is the best way to do this using either PHP or JavaScript?

The steps that I am looking to have for this process are:

1) User clicking the record button. 2) Initiation of the recording sequence. 3) Stopping the sequence. 4) Naming of the file and sending it over to the server.

My main query is focused on the 2nd step, where I'd need some mechanism that would interact with the user's mic to record the voice. I am still new to web dev per se and I do not know how I can invoke voice recording using JavaScript.

Upon searching in Google, I found some links in StackOverflow which addressed similar issues but the answers were not helpful. A lot of solutions pointed to Flash but I would like to avoid that as much as possible. So my question does boil down to "Is it possible to record voice using JavaScript? If yes, how?"

Thanks in advance.

Answer 1

The HTML5 Audio API is not widely supported in browsers, I think it works in Chrome and Firefox has had it recently added to its nightlies... Browser prefixes are required at this stage but the general API is...

navigator.getUserMedia({audio: true}, function(stream) { /* do stuff */ });

So that would be webkitGetUserMedia for Chrome and mozGetUserMedia for Firefox.

Your more consistent options right now are via browser plugins such as Flash or Java or to create a desktop client that the user would need to install.

Resources of interest regarding getUserMedia:

• Intro to getUserMedia
• getUserMedia added to Firefox nightlies
• Audio only issues with getUserMedia in Chromium

The following question may assist you further:

tutorial on using flash or java servlet to upload microphone data from browser to server?

Answer 2

You are now able to record from a microphone by creating an audio graph that connects your local MediaStream to a ScriptProcessingNode:

navigator.webkitGetUserMedia({video: true, audio: true}, function(stream) {
    var audioContext = new webkitAudioContext,
        mediaStreamSource = context.createMediaStreamSource(stream),
        processor = context.createJavaScriptNode(4096, 2, 2);

    processor.onaudioprocess = function(e) {
        // Process the audio data found in e.inputBuffer
    };

    mediaStreamSource.connect(processor);
    processor.connect(context.destination);
});

(Using Chrome vendor prefixes)

You can hook this up to Websockets or even plain XHR to send the chunks to your server, which can process it into an audio file. You'll need to convert each channel from

non-interleaved IEEE 32-bit linear PCM with a nominal range of -1 -> +1

into the format of your choice.

A similar example of recording audio, encoding it into a wav file, and saving it (all client-side) can be found here:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

More details on AudioContext:

http://docs.webplatform.org/wiki/apis/webaudio/AudioContext