Cordova audio recorder plugin tutorial

 

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 :

  1. cordova.plugins.audioRecorder.audioCapture_Start(audioCapture_Ended , audioCapture_Failed , audioCapture_duration )
  2. /*
  3. audioCapture_duration :
  4.     Number of seconds to perform audio
  5.     recording . If non is provided ,
  6.     the default is 60 seconds .
  7. audioCapture_Ended :
  8.     call back function , called when the
  9.     amount of time allocated for recording ,
  10.     audioCapture_duration , has elapsed .
  11.     It receives as argument , a String
  12.     containing the path of the recorded
  13.     m4a audio file .
  14.     If cordova.plugins.audioRecorder.audioCapture_Stop
  15.     is  called , while performing recording ,
  16.     then the registered methods ,
  17.     using this function , are not called  ,
  18.     instead the registered functions , using
  19.     cordova.plugins.audioRecorder.audioCapture_Stop
  20.     are called .    
  21. audioCapture_Failed :
  22.     If any error happens during the
  23.     act of performing the recording ,
  24.     this method is called . It is passed.  
  25.     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 :

  1. cordova.plugins.audioRecorder.audioCapture_Stop(audioCapture_Ended , audioCapture_Failed )
  2. /*
  3. audioCapture_Ended :
  4.    call back function , called when successfully ,
  5.    the audioCapture_Stop function , stopped the
  6.    recording of the audio file .
  7.    audioCapture_Ended receives as argument , a
  8.    String containing the path to the recorded file .
  9. audioCapture_Failed :
  10.    Called when performing the recording has
  11.    failed .
  12.    It receives as an argument , a String , detailing
  13.    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 :

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

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

  1. <platform name="ios">
  2. ...
  3.     <config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
  4.         <array>
  5.             <string>audio</string>
  6.         </array>
  7.     </config-file>
  8. ...
  9. </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 :

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

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

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

  8.     <style >
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px; }
  12.         html{
  13.             box-sizing: border-box; }
  14.         html * , html *::before , html *::after{
  15.             box-sizing: inherit; }

  16.         .app_AudioRecorder_Demo{
  17.             display: flex;
  18.             flex-direction: column; }

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

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

  24.     <body >

  25.         <div class="app_AudioRecorder_Demo" >

  26.             <button
  27.                 id="recordButton"
  28.                 onclick="audioCapture_Start(this )">
  29.                     Record </button>

  30.             <button
  31.                 id='stopButton'
  32.                 onclick="audioCapture_Stop(this )">
  33.                     Stop </button>

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

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

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

  38.             function onDeviceReady( ){
  39.                 deviceIsReady = true;
  40.                 recordButton = document .getElementById ('recordButton' );
  41.                 stopButton = document .getElementById ('stopButton' );
  42.                 audioPlayer = document .getElementById ('audioPlayer' );
  43.                 /* For androind , an application might get killed ,
  44.                   to get the recording which happned while the application
  45.                   is killed , just call
  46.                   cordova .plugins.audioRecorder .audioCapture_Stop ,
  47.                   onDeviceReady .
  48.                   Check beforehand , if the recording time , you have
  49.                   allocated has passed , as not to stop an ongoing
  50.                   recording  .*/
  51.                 if (window .cordova .platformId == 'android'){
  52.                     audioCapture_Stop( ) }}

  53.             function audioCapture_Start ( ){
  54.                 if (deviceIsReady ){
  55.                     cordova .plugins .audioRecorder .audioCapture_Start(
  56.                                         audioCapture_Ended ,
  57.                                         audioCapture_Failed
  58.                                         , 20 ); }}

  59.             function audioCapture_Stop( ){
  60.                 if(deviceIsReady ){
  61.                     cordova .plugins.audioRecorder .audioCapture_Stop(
  62.                                         audioCapture_Ended ,
  63.                                         audioCapture_Failed ); } }

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

  66.             function audioCapture_Failed(audioRecording_error ){
  67.                 console .log (audioRecording_error ); }
  68.         </script>
  69.     </body>
  70. </html>

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

  1. <?xml version='1.0' encoding='utf-8'?>
  2. <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">

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

  10.     <content src="index.html" />

  11.     <access origin="*" />
  12.     <allow-intent href="http://*/*" />
  13.     <allow-intent href="https://*/*" />
  14.     <allow-intent href="tel:*" />
  15.     <allow-intent href="sms:*" />
  16.     <allow-intent href="mailto:*" />
  17.     <allow-intent href="geo:*" />

  18.     <platform name="android">
  19.         <allow-intent href="market:*" />
  20.     </platform>
  21.     <platform name="ios">
  22.         <allow-intent href="itms:*" />
  23.         <allow-intent href="itms-apps:*" />
  24.         <!-- Optional , allow recording in background for ios -->
  25.         <config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
  26.             <array>
  27.                 <string>audio</string>
  28.             </array>
  29.         </config-file>
  30.     </platform>

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

Run the application :

  1. $ cordova emulate ios
  2. $ cordova emulate android