@lgicc/capacitor-voice-recorder NPM

Installation

npm i @lgicc/capacitor-voice-recorder
npx cap sync

Configuration

On iOS

You need to add this to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app uses the microphone to record audio.</string>

bdw. if you wanna know how to localize this in Info.plist I asked myself the same. This good old stack overflow was cool

Supported methods

Name	Android	iOS	Web
canRecord	✅	✅	✅
requestPermission	✅	✅	✅
startRecording	✅	✅	✅
stopRecording	✅	✅	✅
pauseRecording	✅	✅	✅
resumeRecording	✅	✅	✅
getCurrentStatus	✅	✅	✅
addListener('frequencyData')	✅	✅	✅

Overview

The @lgicc/capacitor-voice-recorder plugin allows you to record audio on Android, iOS, and Web platforms. With the addition of recieving a frequencyData stream to show a visual graph of the audio.

Functions

canRecord

Check if the device/browser can record audio.

(async () => {
  const { status } = await VoiceRecorder.canRecord();
  console.log(status);
})();

Return Value	Description
`{ status: 'NOT_GRANTED' }`	The device/browser don't have the permission to record.
`{ status: 'DISABLED_BY_USER' }`	The permission to record in the device/browser got blocked.
`{ status: 'DEVICE_NOT_SUPPORTED' }`	The device/browser is not supported to record.
`{ status: 'GRANTED' }`	The device/browser does have the permission to record.

requestPermission

Request audio recording permission from the user.

(async () => {
  const { status } = await VoiceRecorder.requestPermission();
  console.log(status);
})();

💡hint: On iOS it opens a Alert to ask if there is no permission granted.
If your hyped to deactivate it you can pass {showQuickLink: false} as param.

Return Value	Description
`{ status: 'GRANTED' }`	Permission granted.
`{ status: 'NOT_GRANTED' }`	Permission denied.

Error Code	Description
`DEVICE_NOT_SUPPORTED`	The device/browser does have the permission to record.

startRecording

Start the audio recording.

(async () => {
    try {
        await VoiceRecorder.startRecording();
    } catch (error) {
        console.log(error);
    }
})();

On Success:

Promise resolves

On Error:

Error Code	Description
`MISSING_MICROPHONE_PERMISSION`	Required permission is missing.
`MICROPHONE_IN_USE`	Microphone is already in use.
`UNKNOWN_ERROR`	Unknown error occurred during recording.

stopRecording

Stops the audio recording and returns the recording data.

(async () => {
  try {
    // retrieving audio data
    const result = await VoiceRecorder.stopRecording();
    
    // parsing the data to a Uint8Array
    const data = new Uint8Array(atob(result.base64).split('').map(c => c.charCodeAt(0)));

    // now for example we can play the recorded audio
    const audioBlob = new Blob([data], { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    const audio = new Audio(audioUrl);

    audio.play();
    audio.onended = () => {
      console.log('Audio has finished playing');
    };
    audio.onerror = (err) => {
      console.error('Error playing audio:', err);
    };
  } catch (error) {
    console.log(error);
  }
})();

Return Value	Description
`base64`	The recorded audio data in Base64 format.
`msDuration`	The duration of the recording in milliseconds.
`size`	The size of the recorded audio.

Error Code	Description
`NOT_RECORDING`	No recording in progress.
`UNKNOWN_ERROR`	Unknown error occurred while fetching the recording.

pauseRecording

Pause the ongoing audio recording.

(async () => {
  try { 
    await VoiceRecorder.pauseRecording();
  } catch (error) {
    console.log(error);
  }
})();

On Success:

Promise resolves

On Error:

Error Code	Description
`NOT_RECORDING`	No recording in progress.
`UNKNOWN_ERROR`	Unknown error occurred while fetching the recording.

resumeRecording

Resumes a paused audio recording.

(async () => {
  try {
    await VoiceRecorder.resumeRecording();
  } catch (error) {
    console.log(error);
  }
})();

On Success:

Promise resolves

On Error:

Error Code	Description
`MICROPHONE_IN_USE`	No recording in progress.
`UNKNOWN_ERROR`	Unknown error occurred while fetching the recording.

getCurrentStatus

Retrieves the current status of the recorder.

(async () => {
  const { status } = await VoiceRecorder.resumeRecording();
  console.log(status);
})();

Status Code	Description
`NOT_RECORDING`	Not recording.
`RECORDING`	Currently recording.
`PAUSED`	Recording is paused.

How-to draw cool graph

If you want to draw cool graph you can use the addListener method to get the frequency data.
The data should be nearly the same on each platform to draw. Due to platform differences it can differ a bit.
As how to draw is not the scope of this project, but your anyway want to know how to draw cool graphs, feel free to contact me.

(async () => {
  CapacitorVoiceRecorder.addListener('frequencyData', ({data}) => {
    const frequencyData = new Uint8Array(atob(data).split('').map(c => c.charCodeAt(0)));
    // frequencyData is a array of numbers between 0 and 255
    console.log(frequencyData);
  });
})();

Format and MIME-type

The plugin will return the recording in audio/wav format. As this plugin focuses on the recording aspect, it does not provide any conversion between formats.

Compatibility

Versioning follows Capacitor versioning. Major versions of the plugin are compatible with major versions of Capacitor. You can find each version in its own dedicated branch.