feat: add expo-audio support for voice recordings as well

Author: isekovanic

examples/ExpoMessaging/app.json

@@ -63,10 +63,12 @@
           "supportsPictureInPicture": true
         }
       ],
-      "expo-audio",
-      {
-        "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
-      }
+      [
+        "expo-audio",
+        {
+          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
+        }
+      ]
     ]
   }
 }

package/expo-package/src/optionalDependencies/Audio.ts

@@ -1,22 +1,36 @@
+import { Platform } from 'react-native';
+
 import {
   AndroidAudioEncoder,
   AndroidOutputFormat,
   ExpoAudioRecordingConfiguration as AudioRecordingConfiguration,
   IOSAudioQuality,
   IOSOutputFormat,
   ExpoRecordingOptions as RecordingOptions,
+  RecordingStatus,
 } from 'stream-chat-react-native-core';
 
 import { AudioComponent, RecordingObject } from './AudioVideo';
 
+let ExpoAudioComponent;
+let ExpoRecordingComponent;
+
+try {
+  const { AudioModule } = require('expo-audio');
+  ExpoAudioComponent = AudioModule;
+  ExpoRecordingComponent = AudioModule.AudioRecorder;
+} catch (e) {
+  // do nothing
+}
+
 const sleep = (ms: number) =>
   new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve();
     }, ms);
   });
 
-class _Audio {
+class _AudioExpoAV {
   recording: typeof RecordingObject | null = null;
   audioRecordingConfiguration: AudioRecordingConfiguration = {
     mode: {
@@ -105,8 +119,185 @@ class _Audio {
   };
 }
 
+class _AudioExpoAudio {
+  recording: typeof RecordingObject | null = null;
+  audioRecordingConfiguration: AudioRecordingConfiguration = {
+    mode: {
+      allowsRecordingIOS: true,
+      playsInSilentModeIOS: true,
+    },
+    options: {
+      android: {
+        audioEncoder: AndroidAudioEncoder.AAC,
+        extension: '.aac',
+        outputFormat: AndroidOutputFormat.AAC_ADTS,
+      },
+      ios: {
+        audioQuality: IOSAudioQuality.HIGH,
+        bitRate: 128000,
+        extension: '.aac',
+        numberOfChannels: 2,
+        outputFormat: IOSOutputFormat.MPEG4AAC,
+        sampleRate: 44100,
+      },
+      isMeteringEnabled: true,
+      web: {},
+    },
+  };
+
+  startRecording = async (recordingOptions: RecordingOptions, onRecordingStatusUpdate) => {
+    try {
+      const permissions = await ExpoAudioComponent.getRecordingPermissionsAsync();
+      const permissionsStatus = permissions.status;
+      let permissionsGranted = permissions.granted;
+
+      // If permissions have not been determined yet, ask the user for permissions.
+      if (permissionsStatus === 'undetermined') {
+        const newPermissions = await ExpoAudioComponent.requestRecordingPermissionsAsync();
+        permissionsGranted = newPermissions.granted;
+      }
+
+      // If they are explicitly denied after this, exit early by throwing an error
+      // that will be caught in the catch block below (as a single source of not
+      // starting the player). The player would error itself anyway if we did not do
+      // this, but there's no reason to run the asynchronous calls when we know
+      // immediately that the player will not be run.
+      if (!permissionsGranted) {
+        throw new Error('Missing audio recording permission.');
+      }
+      await ExpoAudioComponent.setAudioModeAsync(
+        expoAvToExpoAudioModeAdapter(this.audioRecordingConfiguration.mode),
+      );
+      const options = {
+        ...recordingOptions,
+        ...this.audioRecordingConfiguration.options,
+      };
+
+      this.recording = new ExpoAudioRecordingAdapter(options);
+      await this.recording.createAsync(
+        Platform.OS === 'android' ? 100 : 60,
+        onRecordingStatusUpdate,
+      );
+      return { accessGranted: true, recording: this.recording };
+    } catch (error) {
+      console.error('Failed to start recording', error);
+      this.recording = null;
+      return { accessGranted: false, recording: null };
+    }
+  };
+  stopRecording = async () => {
+    try {
+      if (this.recording) {
+        await this.recording.stopAndUnloadAsync();
+      }
+      this.recording = null;
+    } catch (error) {
+      console.log('Error stopping recoding', error);
+    }
+  };
+}
+
+class ExpoAudioRecordingAdapter {
+  private recording;
+  private recordingStateInterval;
+  private uri;
+  private options;
+
+  constructor(options: RecordingOptions) {
+    // Currently, expo-audio has a bug where isMeteringEnabled is not respected
+    // whenever we pass it to the Recording class constructor - but rather it is
+    // only respected whenever you pass it to prepareToRecordAsync. That in turn
+    // however, means that all other audio related configuration will be overwritten
+    // and forgotten. So, we snapshot the configuration whenever we create an instance
+    // of a recorder and pass it to both places. Furthermore, the type of the options
+    // in prepareToRecordAsync is wrong - it's supposed to be the flattened config;
+    // otherwise none of the quality properties get respected either (only the top level
+    // ones).
+    this.options = flattenExpoAudioRecordingOptions(options);
+    this.recording = new ExpoRecordingComponent(this.options);
+    this.uri = null;
+  }
+
+  createAsync = async (
+    progressUpdateInterval: number = 500,
+    onRecordingStatusUpdate: (status: RecordingStatus) => void,
+  ) => {
+    this.recordingStateInterval = setInterval(() => {
+      const status = this.recording.getStatus();
+      onRecordingStatusUpdate(status);
+    }, progressUpdateInterval);
+    this.uri = null;
+    await this.recording.prepareToRecordAsync(this.options);
+    this.recording.record();
+  };
+
+  stopAndUnloadAsync = async () => {
+    await this.recording.stop();
+    this.uri = this.recording.uri;
+    clearInterval(this.recordingStateInterval);
+    this.recording.release();
+  };
+
+  getURI = () => this.uri;
+}
+
 export const overrideAudioRecordingConfiguration = (
   audioRecordingConfiguration: AudioRecordingConfiguration,
 ) => audioRecordingConfiguration;
 
-export const Audio = AudioComponent ? new _Audio() : null;
+const flattenExpoAudioRecordingOptions = (
+  options: RecordingOptions & {
+    bitRate?: number;
+    extension?: string;
+    numberOfChannels?: number;
+    sampleRate?: number;
+  },
+) => {
+  let commonOptions = {
+    bitRate: options.bitRate,
+    extension: options.extension,
+    isMeteringEnabled: options.isMeteringEnabled ?? false,
+    numberOfChannels: options.numberOfChannels,
+    sampleRate: options.sampleRate,
+  };
+
+  if (Platform.OS === 'ios') {
+    commonOptions = {
+      ...commonOptions,
+      ...options.ios,
+    };
+  } else if (Platform.OS === 'android') {
+    commonOptions = {
+      ...commonOptions,
+      ...options.android,
+    };
+  }
+  return commonOptions;
+};
+
+const expoAvToExpoAudioModeAdapter = (mode: AudioRecordingConfiguration['mode']) => {
+  const {
+    allowsRecordingIOS,
+    interruptionModeAndroid,
+    interruptionModeIOS,
+    playsInSilentModeIOS,
+    playThroughEarpieceAndroid,
+    staysActiveInBackground,
+  } = mode;
+
+  return {
+    allowsRecording: allowsRecordingIOS,
+    interruptionMode: interruptionModeIOS,
+    interruptionModeAndroid,
+    playsInSilentMode: playsInSilentModeIOS,
+    shouldPlayInBackground: staysActiveInBackground,
+    shouldRouteThroughEarpiece: playThroughEarpieceAndroid,
+  };
+};
+
+// Always try to prioritize expo-audio if it's there.
+export const Audio = ExpoRecordingComponent
+  ? new _AudioExpoAudio()
+  : AudioComponent
+    ? new _AudioExpoAV()
+    : null;

package/expo-package/src/optionalDependencies/Sound.ts

@@ -14,6 +14,7 @@ try {
 }
 
 export const Sound = {
+  // Always try to prioritize expo-audio if it's there.
   initializeSound: ExpoAudioComponent
     ? async (source, initialStatus, onPlaybackStatusUpdate: (playbackStatus) => void) => {
         await ExpoAudioComponent.setAudioModeAsync({
@@ -92,7 +93,7 @@ class ExpoAudioSoundAdapter {
   // eslint-disable-next-line require-await
   unloadAsync: SoundReturnType['unloadAsync'] = async () => {
     this.statusEventListener.remove();
-    this.player.remove();
+    this.player.release();
   };
 
   // eslint-disable-next-line require-await

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -184,7 +184,7 @@ export const useAudioController = () => {
     if (accessGranted) {
       setPermissionsGranted(true);
       const recording = recordingInfo.recording;
-      if (recording && typeof recording !== 'string') {
+      if (recording && typeof recording !== 'string' && recording.setProgressUpdateInterval) {
         recording.setProgressUpdateInterval(Platform.OS === 'android' ? 100 : 60);
       }
       setRecording(recording);
@@ -256,7 +256,6 @@ export const useAudioController = () => {
       await stopVoiceRecording();
     }
 
-    console.log('DURATION?', recordingDuration);
     const durationInSeconds = parseFloat((recordingDuration / 1000).toFixed(3));
 
     const resampledWaveformData = resampleWaveformData(waveformData, 100);

package/src/index.ts

@@ -4,7 +4,7 @@ import './polyfills';
 
 export * from './components';
 export * from './hooks';
-export { registerNativeHandlers, SoundReturnType, PlaybackStatus } from './native';
+export { registerNativeHandlers, SoundReturnType, PlaybackStatus, RecordingStatus } from './native';
 export * from './contexts';
 export * from './emoji-data';