How to record audio in Ionic 2

Ionic Framework ionic-v3
1

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';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  file: MediaPlugin;
  
  constructor() {
  }
  
  onPageLoaded() {
     this.file = new MediaPlugin('https://archive.org/download/SuperMarioBros.ThemeMusic/SuperMarioBros.mp3');
  }
  
  playAudio() {     
    this.file.play();
  }
  
  pauseAudio() {
    this.file.pause();
  }
  
  stopAudio() {
    this.file.stop();
  }
}

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.

2

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);
        this._fileRecord.startRecord();
    }

    public stopRecord(): void {
        this._fileRecord.stopRecord();
    }

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

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

}

1 Like
3

Thanks,

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?

4

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

1 Like
5

Thanks emirliz, this works

6

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

7

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
8

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

9

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’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

public media: MediaPlugin;
caminho: any;

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

) {}

startRecording(){

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

//this program record only 3 seconds – to record more change loader time
let loader = this.loadingCtrl.create({
content:“Listening…”,
duration: 3000
});

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

loader.onDidDismiss(()=>{
  //loader.dismiss();
  try{
    this.media.stopRecord();
    this.finishedRecording("Record finished","Sending audio to server!");
  }catch (e){
    this.finishedRecording("ERROR","Could not stop recording.");
  }
  
});

}

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

}

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

}

}

10

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