How to record audio in Ionic 2

Hello! I’m trying to create an Ionic 2 app that will record audio, after which the recorded audio can be played. After some searching, I found the MediaPlugin component, which API looked very promising.

My first attempt was to play some audio file from the internet, but I can’t get it to work. My page class looks like this:

import {Page, Platform, NavController, Alert} from 'ionic-angular';
import {MediaPlugin} from 'ionic-native';

  templateUrl: 'build/pages/home/home.html'
export class HomePage {
  file: MediaPlugin;
  constructor() {
  onPageLoaded() {
     this.file = new MediaPlugin('');
  playAudio() {;
  pauseAudio() {
  stopAudio() {

When I run this app on my iOS device, nothing happens. I was wondering how I could best debug this problem?

By the way, I added iOS as a platform through ionic platform add ios and the plugin through ionic plugin add cordova-plugin-media.

Hey Man,

Try this:

import {Platform, Page, Events} from 'ionic-angular';
import {MediaPlugin} from 'ionic-native';

export class RecordVoiceModel {
    private _platform: Platform;
    private _fileRecord: MediaPlugin;

    private _pathFile: string;
    private _nameFile: string;

    constructor(platform: Platform, pathFile?:string, nameFile?: string) {
        this._platform = platform;
        this._nameFile = nameFile;
        this._pathFile = pathFile;

    public startRecord(): void {
        this._pathFile = this.getPathFileRecordAudio();
        this._fileRecord = new MediaPlugin(this._pathFile);

    public stopRecord(): void {

    private startPlay(): void {
        this._fileRecord = new MediaPlugin(this._pathFile);;

    private getPathFileRecordAudio(): string {
    let path: string = ('ios') ? '../Library/NoCloud/': '../Documents/');
    return path + this._nameFile + '-' + '.wav';


1 Like


Gave it a try and got this error:

ReferenceError: Media is not defined

The error occurs on this line:
new MediaPlugin(this._pathFile);

any ideas?

This error occured because it was running in the browser. Try running in emulator

1 Like

Thanks emirliz, this works

Yes, I can confirm it works! Thanks a lot.

Please can anyone provide code for android platform , I think path will be different. Also why did we create a member variable called filerecord couldnt we just call it directly after importing it

1 Like

Could u solve this please Problem in designing audio recorder app @saurabhorange

import { Component } from ‘@angular/core’;
import { AlertController } from ‘ionic-angular’;
import { Events } from ‘ionic-angular’;
import { LoadingController } from ‘ionic-angular’;
import { NavController } from ‘ionic-angular’;
import { MediaPlugin } from ‘ionic-native’;
import { Platform } from ‘ionic-angular’;

selector: ‘page-home’,
templateUrl: ‘home.html’
export class HomePage {

public media: MediaPlugin;
caminho: any;

public alertCtrl: AlertController,
public events: Events,
public loadingCtrl: LoadingController,
public platform: Platform

) {}


if ('ios')){
  this.caminho = '../Library/NoCloud/recording.wav';
  this.caminho = "recording.mp3";

//this program record only 3 seconds – to record more change loader time
let loader = this.loadingCtrl.create({
duration: 3000

try{ = new MediaPlugin(this.caminho);;
}catch (e){
  this.finishedRecording("ERROR","Could not start recording.");
  //throw e;

    this.finishedRecording("Record finished","Sending audio to server!");
  }catch (e){
    this.finishedRecording("ERROR","Could not stop recording.");


}catch (e){
  this.finishedRecording("ERROR","Could not play recording.");


  let alert = this.alertCtrl.create({
    title: titulo,
    subTitle: subtitulo,
    buttons: ['OK']



i have this problem:
EXCEPTION: Error in ./Tabs class Tabs - inline template:0:43 caused by: No provider for
Error: No provider for String! at NoProviderError.BaseError [as constructor]