Ionic Audio Script

[SimonIoa]

Hello i want to create a script that allows the user to use the device mic and record audio, then display it using Typescript (.ts) file.
Here is what i have so far.

home.ts

import { Component, ViewChild } from "@angular/core";
import { NavController, App, AlertController, Platform } from "ionic-angular";
import { Common } from "../../providers/common";
import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';

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

  recording: boolean = false;
  filePath: string;
  fileName: string;
  audio: MediaObject;
  audioList: any[] = [];

  getAudioList() {
      if (localStorage.getItem("audiolist")) {
          this.audioList = JSON.parse(localStorage.getItem("audiolist"));
          console.log(this.audioList);
      }
  }

  ionViewWillEnter() {
      this.getAudioList();
  }

  constructor(
    public common: Common,
    private alertCtrl: AlertController,
    private camera: Camera,
    public navCtrl: NavController,
    public app: App,
    private media: Media,
    private file: File,
    public platform: Platform
  ) {
  }

    startRecord() {
  if (this.platform.is('ios')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.3gp';
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.startRecord();
  this.recording = true;
}

stopRecord() {
  this.audio.stopRecord();
  let data = { filename: this.fileName };
  this.audioList.push(data);
  localStorage.setItem("audiolist", JSON.stringify(this.audioList));
  this.recording = false;
  this.getAudioList();
}

playAudio(file,idx) {
  if (this.platform.is('ios')) {
    this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  } else if (this.platform.is('android')) {
    this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + file;
    this.audio = this.media.create(this.filePath);
  }
  this.audio.play();
  this.audio.setVolume(0.8);
}

home.html

<ion-card>
    <ion-card-content>
      <ion-card-title>
        <button ion-button primary (click)="stopRecord()" *ngIf="recording"><ion-icon name="mic-off"></ion-icon>&nbsp;&nbsp;Stop Record</button>
        <button ion-button primary (click)="startRecord()" *ngIf="!recording"><ion-icon name="mic"></ion-icon>&nbsp;&nbsp;Start Record</button>
      </ion-card-title>
    </ion-card-content>
  </ion-card>
  <ion-list>
    <ion-item *ngFor="let audio of audioList; index as i;">
      <p>{{audio.filename}}</p>
      <button ion-button clear item-end large (click)="playAudio(audio.filename, i)"><ion-icon name="play"></ion-icon></button>
    </ion-item>
  </ion-list>

i am doing ionic serve and i am getting Runtime Error this.audio is undefined

this is where i got it from

https://www.djamware.com/post/5a18411b80aca75eadc12d6d/record-and-play-sound-in-ionic-3-angular-5-cordova-mobile-app

[lil_c]

ok