Cordova audio recorder plugin tutorial

Table of Contents

Plugin concepts

The plugin cordova audio recorder , can be used to record audio , on android and iOS . This plugin , provides an api , which is accessible , using the global object cordova.plugins.audioRecorder .

The api , consists of two functions , one for performing the recording , and one for stopping it .

For recording , the cordova.plugins.audioRecorder.audioCapture_Start function , can be used , it has the following signature :

cordova.plugins.audioRecorder.audioCapture_Start(audioCapture_Ended , audioCapture_Failed , audioCapture_duration )
/*
audioCapture_duration : 
    Number of seconds to perform audio
    recording . If non is provided , 
    the default is 60 seconds . 
audioCapture_Ended : 
    call back function , called when the
    amount of time allocated for recording , 
    audioCapture_duration , has elapsed . 
    It receives as argument , a String 
    containing the path of the recorded 
    m4a audio file .
    If cordova.plugins.audioRecorder.audioCapture_Stop 
    is  called , while performing recording , 
    then the registered methods ,
    using this function , are not called  , 
    instead the registered functions , using 
    cordova.plugins.audioRecorder.audioCapture_Stop
    are called .    
audioCapture_Failed : 
    If any error happens during the 
    act of performing the recording , 
    this method is called . It is passed.   
    a String , detailing the error .*/

To stop the recording , it is either stopped automatically , after the set amount of time has elapsed , or it can be stopped at any time , using the cordova.plugins.audioRecorder.audioCapture_Stop method ,which has the following signature :

cordova.plugins.audioRecorder.audioCapture_Stop(audioCapture_Ended , audioCapture_Failed )
/*
audioCapture_Ended : 
   call back function , called when successfully , 
   the audioCapture_Stop function , stopped the
   recording of the audio file . 
   audioCapture_Ended receives as argument , a 
   String containing the path to the recorded file . 
audioCapture_Failed : 
   Called when performing the recording has 
   failed . 
   It receives as an argument , a String , detailing 
   the error .*/

The recorded audio file is an m4a audio file , it is saved in the cache directory , of an application . The cache directory , might be emptied by the system , on low storage . Hence , for permanent storage , the recorded files , must be copied elsewhere .

For iOS , in the config.xml file , found in the root of the application , the following must be added , in between the widget element :

<edit-config file="*-Info.plist" mode="merge" target="NSMicrophoneUsageDescription">
    <string>Describe why microphone permission is needed</string>
</edit-config>

For iOS , also , and to allow recording to continue in the background , you should add UIBackgroundModes , in the config.xml file :

<platform name="ios">
...
    <config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
        <array>
            <string>audio</string>
        </array>
    </config-file>
...
</platform>

For android , the plugin can record , even when the application is destroyed , or is running in the background , nothing is to be configured . When the application is recreated after being destroyed , just call the audioCapture_Stop method , on the deviceready event , to get the recording that has happened , while the application was destroyed .

Plugin demo

Create an application as follows :

$ cordova create audio-recorder-plugin-demo com.twiserandom.mobileapps.demo.audioRecorderPluginDemo "Audio Recorder Plugin Demo"
$ cd audio-recorder-plugin-demo/
$ cordova platform add ios
$ cordova platform add android
$ cordova plugin add cordova-plugin-audio-recorder

Edit the www/index.html file to look like this :

<!DOCTYPE html >
<html >
    <head >
        <meta name="format-detection" content="telephone=no" >
        <meta name="msapplication-tap-highlight" content="no" >
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" >
        <title>Audio Recorder Plugin Demo</title>

    <style >
        *{
            margin: 0px;
            padding: 0px; }
        html{
            box-sizing: border-box; }
        html * , html *::before , html *::after{
            box-sizing: inherit; }

        .app_AudioRecorder_Demo{
            display: flex;
            flex-direction: column; }

        .app_AudioRecorder_Demo button{
            font-size : 19px; }

        .app_AudioRecorder_Demo audio {
            width : 100%; }
    </style> </head>

    <body >

        <div class="app_AudioRecorder_Demo" >

            <button
                id="recordButton"
                onclick="audioCapture_Start(this )">
                    Record </button>

            <button
                id='stopButton'
                onclick="audioCapture_Stop(this )">
                    Stop </button>

            <audio id="audioPlayer" autoplay controls ></audio> </div>

        <script type="text/javascript" src="cordova.js"></script>

        <script>
            document .addEventListener ('deviceready', onDeviceReady , false );

            function onDeviceReady( ){
                deviceIsReady = true;
                recordButton = document .getElementById ('recordButton' );
                stopButton = document .getElementById ('stopButton' );
                audioPlayer = document .getElementById ('audioPlayer' );
                /* For androind , an application might get killed ,
                  to get the recording which happned while the application
                  is killed , just call
                  cordova .plugins.audioRecorder .audioCapture_Stop ,
                  onDeviceReady .
                  Check beforehand , if the recording time , you have
                  allocated has passed , as not to stop an ongoing
                  recording  .*/
                if (window .cordova .platformId == 'android'){
                    audioCapture_Stop( ) }}

            function audioCapture_Start ( ){
                if (deviceIsReady ){
                    cordova .plugins .audioRecorder .audioCapture_Start(
                                        audioCapture_Ended ,
                                        audioCapture_Failed
                                        , 20 ); }}

            function audioCapture_Stop( ){
                if(deviceIsReady ){
                    cordova .plugins.audioRecorder .audioCapture_Stop(
                                        audioCapture_Ended ,
                                        audioCapture_Failed ); } }

            function audioCapture_Ended(audioRecording_path ){
                audioPlayer .src = audioRecording_path; }

            function audioCapture_Failed(audioRecording_error ){
                console .log (audioRecording_error ); }
        </script>
    </body>
</html>

Edit the config.xml file , in the root of the application , to look like this :

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.twiserandom.mobileapps.demo.audioRecorderPluginDemo" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    <name>Audio Recorder Plugin Demo</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>

    <content src="index.html" />

    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <!-- Optional , allow recording in background for ios -->
        <config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
            <array>
                <string>audio</string>
            </array>
        </config-file>
    </platform>

    <edit-config file="*-Info.plist" mode="merge" target="NSMicrophoneUsageDescription">
        <string>Describe why microphone permission is needed</string>
    </edit-config>
</widget>

Run the application :

$ cordova emulate ios
$ cordova emulate android

Getting device information using cordova ! The cordova device plugin , can be used to get the hardware and software information , for a mobile device . Information that can be gotten using the device plugin The plugin adds a global device object , which…
Cordova plugin media capture a tutorial Plugin Concepts The cordova media capture plugin , can be used to capture audios , images , and videos , using a smartphone . This plugin adds the capture object , accessible globally , when the deviceready event is…