Capturing audio in an Ionic 4 app with the help of the media-capture Cordova plugin

Question

Capturing audio in an Ionic 4 app with the help of the media-capture Cordova plugin

I am facing an issue with recording audio in my Ionic 4 app using the media-capture Cordova plugin. Whenever I press the record button, it launches an external recorder app to capture the audio, which I can then play within my app. However, I want to be able to record the audio directly within my app without relying on an external tool. Can anyone guide me on how to achieve this?

Below is the code snippet from my home.page.html file:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Audio Testing App
    </ion-title>
  </ion-toolbar>
</ion-header>

... (omitted for brevity)

In my home.page.ts file:

(Javascript and TypeScript code here)

Screenshots of the app: Image 1: Home Page

https://i.sstatic.net/PBjDh.jpg

Image 2: External Recorder - Opens when clicking the record button

(Would like to avoid this step and record audio directly inside the app)

https://i.sstatic.net/xoMMF.jpg

javascript android ios cordova ionic4

Answer 1

Answer №1

No need to be concerned about this issue. You have the option to easily record audio using the application.

startRecordingAudio() {
  try {
    let fileName =
    'recording' +
    new Date().getDate() +
    new Date().getMonth() +
    new Date().getFullYear() +
    new Date().getHours() +
    new Date().getMinutes() +
    new Date().getSeconds();
    
    if (this.platform.is('ios')) {
      fileName = fileName + '.m4a';
      this.audioPath = this.file.documentsDirectory + fileName;
      this.audio = this.media.create(this.audioPath.replace(/file:\/\//g, ''));
    } else if (this.platform.is('android')) {
      fileName = fileName + '.mp3';
      this.audioPath = this.file.externalDataDirectory + fileName;
      this.audio = this.media.create(this.audioPath.replace(/file:\/\//g, ''));
    }
    this.audio.startRecord();
    this.isAudioRecording = true;
  } catch (error) {
    console.log(error);
  }
}

stopRecordingAudio() {
  this.audio.stopRecord();
  this.isAudioRecording = false;
}

playRecordedAudio() {
  try {
    this.audio = this.media.create(this.audioPath);
    this.audio.play();
    this.audio.setVolume(0.8);
  } catch (error) {
    console.log(error);
  }
}

Remember to include

<application android:requestLegacyExternalStorage="true" />

in your AndroidManifest.xml file

Answer 2

No need to be concerned about this issue. You have the option to easily record audio using the application.

startRecordingAudio() {
  try {
    let fileName =
    'recording' +
    new Date().getDate() +
    new Date().getMonth() +
    new Date().getFullYear() +
    new Date().getHours() +
    new Date().getMinutes() +
    new Date().getSeconds();
    
    if (this.platform.is('ios')) {
      fileName = fileName + '.m4a';
      this.audioPath = this.file.documentsDirectory + fileName;
      this.audio = this.media.create(this.audioPath.replace(/file:\/\//g, ''));
    } else if (this.platform.is('android')) {
      fileName = fileName + '.mp3';
      this.audioPath = this.file.externalDataDirectory + fileName;
      this.audio = this.media.create(this.audioPath.replace(/file:\/\//g, ''));
    }
    this.audio.startRecord();
    this.isAudioRecording = true;
  } catch (error) {
    console.log(error);
  }
}

stopRecordingAudio() {
  this.audio.stopRecord();
  this.isAudioRecording = false;
}

playRecordedAudio() {
  try {
    this.audio = this.media.create(this.audioPath);
    this.audio.play();
    this.audio.setVolume(0.8);
  } catch (error) {
    console.log(error);
  }
}

Remember to include

<application android:requestLegacyExternalStorage="true" />

in your AndroidManifest.xml file

Answer 3

Answer №2

For a great solution, check out the cordova-plugin-media.

Answer 4

For a great solution, check out the cordova-plugin-media.

Capturing audio in an Ionic 4 app with the help of the media-capture Cordova plugin

Answer №1

Answer №2

Similar questions

What is the best way to implement an edit feature in an HTML Vue.js application that is stored within an array

Storing an existing item from shared preferences into an array list in an Android application

JavaScript form validation involves using client-side scripting to ensure that

Error in overwritePermissions caused by a bug

What is the reason behind classList returning 'undefined' unless getElementById is explicitly used?

The functionality of the page becomes disrupted when multiple timers are used after the setInterval function is executed in

Is it possible to hide Form elements and remove their values simultaneously?

Having trouble initiating a "curl:localhost:3000" connection, receiving a URI Error message

What is the best way to navigate to a specific location on a web page?

How to detect changes in a variable within a different component using Angular 7

To include the express module in another JavaScript file, simply require it at the top of the file using the following code: `

Replacing the tbody element in React with centered text using inline styles ---If you want

The final marker is consistently used by the click event

Assign an attendee the role of organizer in the Google Calendar API

Error (2322) Occurs When TypeScript Class Implements Interface with Union Type Field

Deciphering WHERE conditions in a Node.js environment

Adjust the CSS of a dynamically generated jQuery checkbox button in real-time

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

Validating classes in Node.js using class-validator

Bundling extraneous server code in client rollup