Capacitor Voice Recorder

@lgicc/capacitor-voice-recorder

Simple Voice Recording with capacitor and the capability of receiving frequency data to show cool graphs

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.

Plugin Version	Capacitor Version	Branch
7.*	7	main

License

This project is licensed under the MIT License - see the LICENSE file for details.