18

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.

day0
  • 497
  • 2
  • 5
  • 10
  • 10
    I'm not sure why this question was closed. Since it is tagged JavaScript/HTML5, I think it isn't vague at all. The user was trying to ask how they would record audio in the browser. As it was tagged PHP as well, I'd think the next logical step would be sending the captured audio to the server over XHR. This is something WebRTC could possibly handle. Unfortunately, I can't re-open this question I think. – Raymond Camden Aug 27 '12 at 20:57
  • 3
    I think it is closed because the poster is not showing any effort or research that they themselves have done. Because of that, it is difficult to accurately guess the exact intention of the question. – Jon Egeland Aug 27 '12 at 21:01
  • 2
    I've voted to reopen, but the question could still use improvement, primarily because there is still no actual question. It sounds like the second step is really where you want help, but you don't have a specific question; coming up with one would help immensely. If you think that this can be done in JavaScript, do a bit of research on google (sounds like you did), post why it didn't help, explain exactly what you want, what you've tried, and where you're stuck. Anything you can add to help people believe that you've been trying to solve this yourself will make people feel more benevolent. – Beska Aug 27 '12 at 21:21
  • @Beska: Thanks for the advice! I'll incorporate some changes to the question. – day0 Aug 28 '12 at 06:57
  • I'm gonna vote to close this since it's a duplicate... – Purag Aug 29 '12 at 02:15
  • 1
    possible duplicate of [Capture Audio Input with flash or html5](http://stackoverflow.com/questions/8587882/capture-audio-input-with-flash-or-html5) – Purag Aug 29 '12 at 02:15
  • Hope this will help you. http://slides.html5rocks.com/#speech-input – Prasad Rajapaksha Aug 29 '12 at 02:17
  • maybe https://github.com/addpipe/simple-recorderjs-demo ? – TPArrow Jan 17 '20 at 15:00

3 Answers3

10

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:

The following question may assist you further:

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

Community
  • 1
  • 1
Stuart Wakefield
  • 6,294
  • 24
  • 35
3

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

grrizzly
  • 60
  • 4
1

Until HTML5 audio recording arrives, you really need to hobble together a solution that combines Flash and on mobile devices, file upload. On mobile devices the file upload screen usually has an audio or video recorder, so users can record direct from their device.

If the device doesn't have an audio recorder on the file upload, you should use the video recorder and then convert the video to MP3 on the server. That is how we do it over it at recordmp3online.com .

J.Hunt
  • 55
  • 7