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