Encode audio from getUserMedia() to a .OGG in JavaScript [duplicate]

Question

So I have this HTML5 project I'm working on, where I'm converting an iOS app to a web-based one. Accompanying part of the content creation of the app is an audio recording, which I'm trying to replicate in JavaScript without the use of plugins; so far, I've been able to record audio from getUserMedia(), and turn it into a WAV thanks to Recorder.js.

Now, however, I'm a bit lost. I currently have two separate views, one for recording content and one for playing it back, but I don't know how to get the audio exported form Recorder.js into my JSON payload for playback (I'd like to avoid forcing a server upload or client download).

So I guess my specific question is, how do I take the blob object (something I know almost nothing about) made by Recorder.js and turn it into either raw data, or somehow send the File through JSON?

UPDATE: I've decided to try and use the speex.js tool (https://github.com/jpemartins/speex.js) to encode a .OGG (much smaller than a .WAV). However, I'm not really sure how to use it; the demo page didn't seem to work for me, and trying to call the .encode() function of a Speex object doesn't seem to actually encode the data, I only get zeros in the object fields. Does anyone know of any resources where I can learn how to use this type of tool?

Fendley

I'm also currently trying to set somethig up with getUsetMedia and I tried out several tutorial, but I still find it quite challenging sometimes. What do you mean by JSON payload for playback? Do you have an <audio> tag, that you want to play the recorded audio? If so, I think you don't need recorder.js, you should be able to just "somehow" pass the stream to the <audio> tag. And what do you mean by raw data? – Spanking

And if you want to convert a Blob to text, you could take a look at the FileReader object. The methods of this take a Blob as argument and "convert" it to text I think. But I'm not sure how to use it exactly or if it even does what I think it does. Didn't have chance to take a closer look at it yet. – Spanking

Thanks, I was just looking at FileReader. What I meant by "raw data" was the actual data contained in the .WAV file exported by recorder; since this should eventually be able to be sent between an iPad and a browser, being able to send a .WAV file would be very beneficial. The problem I'm having is that I don't know how to send the actual data of the .WAV file, because I just have a blob object with a type and length, no apparent data. – Fendley

As an update: I've tried all four FileReader functions on the blob/blob's URL and they all seem to return "undefined". I'm new to the whole File/Media APIs, so I'm most likely connecting things wrongly. – Fendley

There is still data attached to the blob object, even if you don't see it in javascript. A Blob contains binary data, that you can send for instance via a web socket (that's what I'm doing but I'm sending it back to the server...so I don't know if web sockets are appropriate for sending between IPad and browser) – Spanking

Well as I said, I didn't try it myself but yes, the return value of all the methods is undefined. I think you can read the Blob and access the result property of the FileReader object afterwards. FileReader.readAsText(blob); var text = FileReader.result – Spanking

Right, what I meant to say was reader.result is null (not undefined, my mistake). They don't seem to be reading them in - maybe I need to wait some time before it happens? – Fendley

Yes, I also just tried it with a minimal example. You have to check the property readyState. When it is 2, you can access result. Unfortunately readAsText doesn't have a callback so you probably need to set an interval or a timeout. – Spanking

Okay, I think I'm getting closer; first, I set up the callback on FileReader: reader.onload = function(data) { console.log(reader.result) } Next, I simply called reader.readAsBinaryString(blob), which spit a bunch of binary starting with WAVE into my console. – Fendley

Ahh...the onload event...that makes sense. And yes, this is how wave files start. Looks good to me. – Spanking

HTML5 has an audio tag most browsers only support ogg and .WAV types for audio – Onym

check this out : github.com/itsjoesullivan/libvorbis.js – Extinctive

Just re-sharing what I posted in the original post: I developed a library to make this simpler: github.com/sb2702/audioRecord.js – Menander

Speex.js is for speex codec, not vorbis (what people usually mean by ogg) – Floccule

Answer 1

There is a library (MIT licenced) which should work, I believe I have seen this exact library being used for saving ogg files from a getUserMedia audio stream on a website not long ago. I vaguely remembered the library name, but I think this is the one:

https://github.com/streamproc/MediaStreamRecorder/blob/master/AudioStreamRecorder/MediaRecorder.js

The whole project on GitHub: https://github.com/streamproc/MediaStreamRecorder/

Since it seems so hard to achieve this, it might at least be worth a look to understand the concepts - but I'd say it's rather advanced javascript we are dealing with here...

Mok

Actually this lib does not encode the Ogg file, justs records the wave and uses the 0gg mime type. In order to encode de ogg file the better solution is use webrtc-experiment.com/ffmpeg/wav-to-ogg.html – Ima