Angular Audio Recorder

This is an AngularJS plugin for recording audio input. The directive uses one of the following internally:

This plugin also has the ability to convert the resulting Wave audio file into MP3. This is made optional for MPEG license reasons.

Wave for the resulting audio is displayed using wavesurfer.js

Installation

To install via Bower, simply do the following:

bower install angularAudioRecorder

NOTICE: When using Cordova, the Media plugin is required, see Cordova Media Plugin for details on Installation.

Demo

See the demo directory for a simple demo.

Usage

The Audio recorder is a directive and it can be used as an attribute or an element (preffered).

The general structure is :

<!-- Somewhere on your page -->
<script src="/path/to/angular-recorder/dist/angular-audio-recorder.min.js"></script>
<!--- use if you want wave display !-->
<script src="/path/to/wavesurfer/wavesurfer.min.js"></script>

Then add as a dependency to your project:

angular.module('yourAppName', [
    //include other dependencies
    'angularAudioRecorder'
]);

You can configure options using

angular.module('yourAppName')
      .config(['recorderServiceProvider', function(recorderServiceProvider){
        //configure here
      }]);
<ng-audio-recorder id='audioInput' audio-model='recordedInput'>
  <!-- Start controls, exposed via recorder-->
  <div ng-if="recorder.isAvailable">
    <button ng-click="recorder.startRecord()" type="button" ng-disabled="recorder.status.isRecording">
        Start Record
    </button>
    <button ng-click="recorder.stopRecord()" type="button" ng-disabled="recorder.status.isRecording === false">
        Stop Record
    </button>
    <button ng-click="recorder.playbackRecording()" type="button"
            ng-disabled="recorder.status.isRecording || !recorder.audioModel">
        Play Back
    </button>
  </div>

  <div ng-if="!recorder.isAvailable">
    Message for users when recording is not possible.
  </div>
  <!-- End controls-->
</ng-audio-recorder>

API Reference

Please note that TypeScript/Flow type notations are used here for easy comprehension.

The following API are exposed to your application.

Provider recorderServiceProvider

This is the provider for configuring the recorderService.

Service recorderService

This service is used internally by the directive, even though it's exposed to your application, there is no guarantee on its behavior.

Properties

Methods

Directive ngAudioRecorder 

<ng-audio-recorder attributes...></ng-audio-recorder>

This is probably the only component which you will interact with when using this application, it can be used as an element (preffered) or as an attribute. The directive takes in the following attributes:

Controller ngAudioRecorderController

The controller for the ngAudioRecorder directive is exposed to your template (within the directive element) as an object recorder which can be used to control the recording and the playback.

The controller exposes the following :

Properties

Methods

Directive ngAudioRecorderAnalyzer

<ng-audio-recorder-analyzer></ng-audio-recorder-analyzer>

This directive displays audio input analysis during recording, see here for example of what an analyzer looks like.

Please note this directive is only available in HTML5 mode.

Directive ngAudioRecorderWaveView

<ng-audio-recorder-wave-view attributes></ng-audio-recorder-wave-view>

This directive displays the waveform of the recorded audio, using wavesurfer.js

The options for initializing the WaveSurfer object can be passed in as attributes of the ng-audio-recorder-wave-view.

For details of the options available when initializing WaveSurfer, see here

Since attributes passed to AngularJS directives are normalized, you should pass the options as dash delimited, as an example barWidth should be passed bar-width.

Credits

License (MIT)

Copyright © 2015

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.