Record an Audio

Ionic Framework ionic-v3
1

Hi,

I want a page what can record audio with cordova plugin.

Here it is created file for record this function;

import { Component, Provider } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Media, MediaObject } from '@ionic-native/media';
import { File } from '@ionic-native/file';
import { Platform } from 'ionic-angular/platform/platform';
import { AudioProvider } from 'ionic-audio';

/**
 * Generated class for the SendPostPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-send-post',
  templateUrl: 'send-post.html',
})
export class SendPostPage {

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

  mediaPlugin: Media = null;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private media: Media,
    private file: File,
    public platform: Platform,
    private audioProvide: AudioProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SendPostPage');
  }

  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() + '.m4a';

      alert(this.file.tempDirectory)

      this.file.createFile(this.file.tempDirectory, this.filePath, true).then(() => {
        let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + this.filePath);
        alert(file);
      });

      if (this.file.documentsDirectory !== null || this.file.documentsDirectory !== undefined) {
        alert(this.file.documentsDirectory);
        this.audio = this.media.create(this.filePath);
      }
    }
    else if (this.platform.is('android')) {

      alert('Android');
      alert(this.file.tempDirectory);      

      this.fileName = 'record' + new Date().getDate() + new Date().getMonth() + new Date().getFullYear() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + '.3gp';

      this.file.createFile(this.file.tempDirectory, this.filePath, true).then(() => {
        let file = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + this.filePath);
      });

      if (this.file.documentsDirectory !== null || this.file.documentsDirectory !== undefined) {
        alert(this.file.documentsDirectory);
        this.audio = this.media.create(this.filePath);
      }
    }

    this.audio.startRecord();
    this.recording = true;
  }

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

  ngAfterContentInit() {
    // get all tracks managed by AudioProvider so we can control playback via the API
    this.audioList = this.audioProvide.tracks;
  }

  playSelectedTrack() {
    // use AudioProvider to control selected track 
    this.audioProvide.play(this.selectedTrack);
  }

  pauseSelectedTrack() {
    // use AudioProvider to control selected track 
    this.audioProvide.pause(this.selectedTrack);
  }
}

So I want create an temporary file directory because I will send this file to server, user must take a check sound then post it. But temporary file return null.

How can do that?

EDIT

I need to know, should I create a directory for this function with cordova plugin? If it’s “Yes”, so

this.file.temporartDirectory

Must be seted?

1 Like
2

Did you find any solution?

3

For anyone still struggling, here is what I have and it works for me on both platforms:

  startAudioRecording() {
    if (this.plt.is('ios')) {
      this.file.createFile(this.file.tempDirectory, 'temp.m4a', true).then(() => {
        this.recorder = this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'temp.m4a');
        this.recorder.startRecord();
        this.recorder.onError.subscribe(error => console.log('Error!', error));
      }).catch((error) => { console.log(error) });
    } else if (this.plt.is('android')) {
      this.filePath = this.file.externalRootDirectory + 'temp.3gp';
      this.recorder = this.media.create(this.filePath);
      this.recorder.startRecord();
      this.recorder.onError.subscribe(error => console.log('Error!', error));
    }
  }

Then to stop and save as base64:

  stopAudioRecording() {
    this.recorder.stopRecord();
    if (this.plt.is('ios')) {
      this.file.readAsDataURL(this.file.tempDirectory, 'temp.m4a').then((base64File) => {
        console.log(base64File);
        this.recordedAudio = base64File;
      }).catch((error) => { console.log("file error", error) })
    } else if (this.plt.is('android')) {
      this.file.readAsDataURL(this.file.externalRootDirectory, 'temp.3gp').then((base64File) => {
        console.log(base64File);
        this.recordedAudio = base64File;
      }).catch((error) => { console.log("file error", error) })
    }
  }
4

Hi I am working on this similar code my issue is I am uploading this file to s3 and trying to convert this file into text using aws TranscriptionJob

but I am getting FAILED with message that “Unsupported audio format: aac”

How we can changes format to MP3 I tested with renaming file but that is not working no matter what format is have using in filename MP4 , mp3 getting this same error. please Help.