How to record audio and playback on Ionic 2?

Question

I am currently working on an Ionic 2 app project which allows users to record their own sound, stop the recording and also play that sound back. According to ionic-native, I can see they provide 2 plugins which are MediaPlugin and MediaCapture. I have tried out using MediaPlugin but I faced problems while starting the record, stop it and play it back. Have anybody experienced using this plugin ? I have went through the ionic docs and some other blogs but still I am not able to make it. I am very new to this, thank you so much for your efforts. I appreciate all of your idea.

Regards,

This is the logs I got from emulator while start the recording:

I/MPEG4Writer(  401): limits: 2147483647/0 bytes/us, bit rate: 12200 bps and the estimated moov size 3072 bytes
D/Genyd   (   56): Received Set Clipboard
D/Genymotion(   56): Received Set Clipboard
D/dalvikvm(  379): GC_CONCURRENT freed 717K, 13% free 6011K/6864K, paused 0ms+1ms, total 10ms
E/genymotion_audio(  401): get_next_buffer() pcm_read error -1
W/PluginManager( 1116): THREAD WARNING: exec() call to Media.startRecordingAudio blocked the main thread for 10037ms. Plugin should use CordovaInterface.getThreadPool().
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
I/MPEG4Writer(  401): setStartTimestampUs: 10031588
I/MPEG4Writer(  401): Earliest track starting time: 10031588
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
E/genymotion_audio(  401): get_next_buffer() pcm_read error -16

This is the logs I got from emulator while stop the recording:

 I/MPEG4Writer(  401): Received total/0-length (42/0) buffers and encoded 42 frames. - audio
    I/MPEG4Writer(  401): Audio track drift time: 0 us
    D/MPEG4Writer(  401): Stopping Audio track source
    E/genymotion_audio(  401): get_next_buffer() pcm_read error -16
    D/MPEG4Writer(  401): Audio track stopped
    D/MPEG4Writer(  401): Stopping writer thread
    D/MPEG4Writer(  401): 0 chunks are written in the last batch
    D/MPEG4Writer(  401): Writer thread stopped
    I/MPEG4Writer(  401): The mp4 file will not be streamable.
    D/MPEG4Writer(  401): Stopping Audio track
    D/AudioPlayer( 1116): renaming /storage/emulated/0/tmprecording.3gp to /storage/emulated/0/../Documents/undefined-.wav
    E/AudioPlayer( 1116): FAILED renaming /storage/emulated/0/tmprecording.3gp to /storage/emulated/0/../Documents/undefined-.wav
    W/PluginManager( 1116): THREAD WARNING: exec() call to Media.stopRecordingAudio blocked the main thread for 135ms. Plugin should use CordovaInterface.getThreadPool().

Here is my home.ts code:

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

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    private _platform: Platform;
    private _fileRecord: MediaPlugin;
    private _pathFile: string;
    private _nameFile: string;
  constructor(private navCtrl: NavController, platform: Platform) {
     this._platform = platform;
  }
  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';
  }
 }

Answer 1

Have you checked out the comments in the source for the plugin? There are notes about how to tweak things... Someone had something similar here but you gave far more details pertaining to the errors. (And I copied the comments into that answer).