Record Audio using Ionic 2 on ios

Ionic Framework ionic-v3
1

Hi. Ionicest.
I am going to create to record audio on ios using Ionic 2.
I already added MediaPlugin in my app.
I attend my code snippet in following.

  _fileRecord: MediaPlugin;
  _pathFile: string;
  _nameFile: string;
constructor(public navCtrl: NavController, ... ){
   _nameFile = new Date();
}

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

And I have executed the app on the my iphone.
I have recorded audio and play that, but it didn’t play.
Even I don’t know is there recorded file or not.
How can I fix this.

2

Check this https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/

I have a lot of problem with this on android like you. I had to use externalDataDirectory, your problem can be the same.
When i used wrong path, the audio file has been created on mobile storage asa temprecording-xxx...3gp.

3

Hi @Hexiler.
Thank you for your help.
Yes. the audio file has been created on android storage as a temprecording-xxx…3gp.
I want to solve ios version, too.
Can you help me?
Can you share your code snippet?
I am a beginner for Ionic 2.
I don’t know how can I use cordova plugin in Ionic 2 application well.

4

Unfortunately I am not a master either, but i think you should try to give the path how you can see those in the link what i share before.

You have to declare the cordova “word”, then you won’t get any error, and you can use cordova plugin.

declare var cordova: any;
this.filePath = cordova.file.externalDataDirectory;

Use this format, it is important. I think it will help to you, i am sorry but i cannot try it because i do not have any ios device (maybe you should use this on ios 'cordova.file.dataDirectory;`).

5

Hi @Hexiler.
Thank you for your help.
Your reply is very helpful for me and for beginners.

I’ve got the recording path with your method and tested again.
But I can’t record audio.
The .ts file is following.

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { MediaPlugin } from 'ionic-native';

declare var cordova: any;

@Component({
   selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  media: MediaPlugin;
  filePath: string;
  fileName: string;

  constructor(public navCtrl: NavController, 
            public alertCtrl: AlertController) {
  }

  ionViewDidEnter() {
    this.filePath = cordova.file.dataDirectory;
    this.showAlert('directory :  ' + this.filePath);
    this.media = new MediaPlugin('../Library/NoCloud/recording.wav')
  }

  startRecording() {
    try {
      this.media.startRecord();
    }
    catch (e) {
      this.showAlert('Could not start recording.');
    }
  }

  stopRecording() {
    try {
      this.media.stopRecord();
    }
    catch (e) {
      this.showAlert('Could not stop recording.');
    }
 }

  startPlayback() {
    try {
      this.media.play();
    }
    catch (e) {
      this.showAlert('Could not play recording.');
    }
  }

  stopPlayback() {
    try {
      this.media.stop();
    }
    catch (e) {
      this.showAlert('Could not stop playing recording.');
    }
  }

  showAlert(message) {
    let alert = this.alertCtrl.create({
      title: 'Error',
      subTitle: message,
      buttons: ['OK']
    });
    alert.present();
  }
}

The recording path is "file:///storage/emulated/0/Android/data/com.ionicframework.xxx/files/"
How can I record the audio.
Thanks again.

1 Like
6

Well, i do not understand this.

this.filePath = cordova.file.dataDirectory;
this.showAlert('directory :  ' + this.filePath);
this.media = new MediaPlugin('../Library/NoCloud/recording.wav')

Because you set the filePath variable, then console.log() it, and you can see that is the correct way. However, you do not use the path nowhere.

Instead of this,

this.media = new MediaPlugin(‘…/Library/NoCloud/recording.wav’)

you should use this

this.media = new MediaPlugin(this.filePath);

I think it should work, you just forget to use the correct path. :slight_smile:
(If you meant under “But I can’t record audio.”, that you do not find the file)

So, if it will not working after this, then please give me more information about what’s happening exactly, after this .ts file has been called.

7

I have the same Problem

8

Android version is find, but iOS version doesn’t work.
You must be change the plugin.
I have changed plugin and fixed that problem.

9

Please comment that you have the Same Problem

10

Have no one a Solution for this? :frowning: No one is using a chat with voice message?!