Ionic

Audio Recording in Ionic App

Here we use Media Plugin to record audio in Ionic app. To use this plugin follow the following steps:-

  1. Install Cordova and Ionic native media plugin :

 ionic cordova plugin add cordova-plugin-media npm install --save @ionic-native/media  

  1. After installing this plugin, add it to your app’s NgModule in app.module.ts page.
  2. Now to use this plugin on any particular page to record audio you have to import this on that page and add in constructor like below:-

import { Media, MediaObject } from ‘@ionic-native/media’;

constructor(private media: Media) { }

  1. To record any audio you have to create file before and then start record. To create a file use File object which have to import on that page and add also in constructor

 import { Media, MediaObject } from '@ionic-native/media'; import { File, DirectoryEntry } from '@ionic-native/file'; fileName: any; getFile: MediaObject; constructor(private media: Media, private file: File) { } recordAudio() { var me = this; me.fileName = 'sample.m4a'; var name = me.fileName; if (me.plt.is('android')) { //  when platform  is Android me.file.createFile(me.file.externalDataDirectory, name, true).then(() => { me.getFile = me.media.create(me.file.externalDataDirectory.replace(/^file:\/\//, '') + name); me.getFile.startRecord(); }).catch(e => alert('Error #2: ' + e)); } else { // when platform  is IOS me.file.createFile(me.file.dataDirectory, name, true).then(() => { me.getFile = me.media.create(me.file.dataDirectory.replace(/^file:\/\//, '') + name); me.getFile.startRecord(); }).catch(e => alert('Error #2: ' + e)); } } 

Note: – IOS only records files of type .wav and .m4a and returns an error if the file name extension is not correct.

For android you can use .mp3, .mp4 and other extensions.

  1. You also have to remember that in Android, file will be created in externalDataDirectory

but in IOS file will be created in dataDirectory.

  1. Now you can use following Instance Members of this plugin like
  • To pause the recording- getFile.pauseRecord();
  • To resume the recording – getFile.resumeRecord();
  • To stop the recording- getFile.stopRecord();
  1. So Many methods are there in this plugin to use for recording. You can use the full info about the plugin from here https://github.com/apache/cordova-plugin-media
  2. Now build the app and check in your device.
  3. In IOS this plugins requires the following usage description:

NSMicrophoneUsageDescription describes the reason that the app accesses the user’s microphone.

  1. You have to add this entry into the info.plist, you can use the edit-config tag in the config.xml like this

 <edit-config target="NSMicrophoneUsageDescription" file="*-Info.plist" mode="merge"> <string>need microphone access to record sounds</string> </edit-config> 

Build the app and run in device with recording feature.

Most Popular

Have a Great startup Idea and want to make it possible? Looking for an extraordinary team to build a mobile or Web app for your idea to come into reality? Then you are at right place. I provide my services for mobile and web app development.

Copyright © 2019 CrocoCode. All rights reserved.

To Top