AngularJS + HTML5 record audio file

Question

I'm looking for a simple solution to record audio file and upload it to s3.

My web searches come up to find:

WebRTC-Experiment which is the most popuplar solution i could find.

it also have a working example in the following link : https://www.webrtc-experiment.com/RecordRTC/

I also found ngCamRecorder which wasn't supported by firefox yet.

I'm looking for a simple solution + working example, and suggestion.

1. Which solution is most popuplar to use with AngularJS?

2. if you can provide your own example or link to a working example that i can use.

3. if you also used S3 i would like to know how you can push the file to S3, and get the link to the controller.

The solution i found, throw error, and include a working example without the code itself explained. I also would like to know how to push it to s3.

This is the code i implemented from the example:

$scope.start_recording = function()
{
    navigator.getUserMedia(session, function (mediaStream) {
        window.recordRTC = RecordRTC(MediaStream);
        recordRTC.startRecording();
    }, function(error){console.log(error)});
};

$scope.stop_recording = function()
{
    navigator.getUserMedia({audio: true}, function(mediaStream) {
        window.recordRTC = RecordRTC(MediaStream);
        recordRTC.startRecording();
    });
};

It simply throw an error: undefined is not a function on recordrtc.js line 641

  if(!mediaStream.getAudioTracks().length) throw 'Your stream has no audio tracks.';

obviously mediaStrem is null.

Thanks.

Answer 1

There's an AngularJS wrapper for this, it's a simple directive that supports HTML5 (RecorderJS), Cordova Media and Flash.

Usage is straightforward

<ng-audio-recorder audio-model="someModel" auto-start="false">
   <!-- controls -->
   <button ng-click='recorder.startRecording()'>Start</button>
   <button ng-click='recorder.stopRecording()'>Stop</button>
</ng-audio-recorder>

You can see the full usage here:

https://github.com/logbon72/angular-recorder