title: Recording audio inside ionic 4 app using media-capture cordova plugin
body: <p>I'm trying to record audio inside ionic 4 app using media-capture cordova plugin, But the problem is when I hit the record button it opens an external recorder app and records the audio, then I can play it inside my app. I would like to record the audio inside my app itself without opening an external recorder. Please help!</p>
  
  <p>Here's my home.page.html: </p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
        Audio Testing App
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;div class="ion-padding"&gt;
      &lt;ion-button color="primary" (click)="record()"&gt;Record&lt;/ion-button&gt;
  
      &lt;ion-list&gt;
        &lt;ion-item-sliding *ngFor="let f of files"&gt;
          &lt;ion-item (click)="openFile(f)"&gt;
            &lt;ion-icon name="mic" slot="start"&gt;&lt;/ion-icon&gt;
  
            &lt;ion-label class="ion-text-wrap"&gt;
              {{ f.name }}
              &lt;p&gt;{{ f.fullPath }}&lt;/p&gt;
            &lt;/ion-label&gt;
          &lt;/ion-item&gt;
  
          &lt;ion-item-options side="start"&gt;
            &lt;ion-item-option (click)="deleteFile(f)" color="danger"&gt;
              &lt;ion-icon name="trash" slot="icon-only"&gt;&lt;/ion-icon&gt;
            &lt;/ion-item-option&gt;
          &lt;/ion-item-options&gt;
        &lt;/ion-item-sliding&gt;
      &lt;/ion-list&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>home.page.ts file:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NativeAudio } from '@ionic-native/native-audio/ngx';
  import { MediaCapture, MediaFile, CaptureError } from '@ionic-native/media-capture/ngx';
  import { File, FileEntry } from '@ionic-native/File/ngx';
  import { Platform } from '@ionic/angular';
  import { Media, MediaObject } from '@ionic-native/media/ngx';
  
  const MEDIA_FOLDER_NAME = 'audio_app_media';
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage implements OnInit {
    files = [];
  
    constructor(private nativeAudio: NativeAudio,
      private mediaCapture: MediaCapture,
      private file: File,
      private media: Media,
      private plt: Platform) { }
  
    ngOnInit() {
      this.plt.ready().then(() =&gt; {
        let path = this.file.dataDirectory;
        this.file.checkDir(path, MEDIA_FOLDER_NAME).then(
          () =&gt; {
            this.loadFiles();
          },
          err =&gt; {
            this.file.createDir(path, MEDIA_FOLDER_NAME, false);
          }
        );
      });
    }
  
    loadFiles() {
      this.file.listDir(this.file.dataDirectory, MEDIA_FOLDER_NAME).then(
        res =&gt; {
          this.files = res;
        },
        err =&gt; console.log('error loading files: ', err)
      );
    }
  
    record() {
      this.mediaCapture.captureAudio().then(
        (data: MediaFile[]) =&gt; {
          if (data.length &gt; 0) {
            this.copyFileToLocalDir(data[0].fullPath);
          }
        },
        (err: CaptureError) =&gt; console.error(err)
      );
    }
  
    openFile(f: FileEntry) {
      const path = f.nativeURL.replace(/^file:\/\//, '');
      const audioFile: MediaObject = this.media.create(path);
      audioFile.play();
    }
  
    deleteFile(f: FileEntry) {
      const path = f.nativeURL.substr(0, f.nativeURL.lastIndexOf('/') + 1);
      this.file.removeFile(path, f.name).then(() =&gt; {
        this.loadFiles();
      }, err =&gt; console.log('error remove: ', err));
    }
  
    copyFileToLocalDir(fullPath) {
      let myPath = fullPath;
      // Make sure we copy from the right location
      if (fullPath.indexOf('file://') &lt; 0) {
        myPath = 'file://' + fullPath;
      }
  
      const ext = myPath.split('.').pop();
      const d = Date.now();
      const newName = `${d}.${ext}`;
  
      const name = myPath.substr(myPath.lastIndexOf('/') + 1);
      const copyFrom = myPath.substr(0, myPath.lastIndexOf('/') + 1);
      const copyTo = this.file.dataDirectory + MEDIA_FOLDER_NAME;
  
      this.file.copyFile(copyFrom, name, copyTo, newName).then(
        success =&gt; {
          this.loadFiles();
        },
        error =&gt; {
          console.log('error: ', error);
        }
      );
    }
  
  }
  </code></pre>
  
  <p>Here's the screenshots of the app:
  Image 1: home page</p>
  
  <p><a href="https://i.stack.imgur.com/PBjDh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PBjDh.jpg" alt="enter image description here"></a></p>
  
  <p>Image 2: External recorded, on clicking record button this opens up</p>
  
  <blockquote>
    <p>(DON'T WANT TO GO HERE, INSTEAD RECORD DIRECTLY INSIDE MY APP)</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/xoMMF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xoMMF.jpg" alt="enter image description here"></a></p>