@siteed/expo-audio-stream 1.7.2 → 1.9.0

package/src/WebRecorder.web.ts

@@ -35,6 +35,14 @@ const DEFAULT_ALGORITHM = 'rms'
 
 const TAG = 'WebRecorder'
 
+const STOP_PERFORMANCE_MARKS = {
+    STOP_INITIATED: 'stopInitiated',
+    COMPRESSED_RECORDING_STOP: 'compressedRecordingStop',
+    AUDIO_WORKLET_STOP: 'audioWorkletStop',
+    CLEANUP: 'cleanup',
+    TOTAL_STOP_TIME: 'totalStopTime',
+} as const
+
 export class WebRecorder {
     private audioContext: AudioContext
     private audioWorkletNode!: AudioWorkletNode
@@ -44,15 +52,18 @@ export class WebRecorder {
     private emitAudioEventCallback: EmitAudioEventFunction
     private emitAudioAnalysisCallback: EmitAudioAnalysisFunction
     private config: RecordingConfig
-    private position: number // Track the cumulative position
+    private position: number = 0
     private numberOfChannels: number // Number of audio channels
     private bitDepth: number // Bit depth of the audio
     private exportBitDepth: number // Bit depth of the audio
-    private audioBuffer: Float32Array // Single buffer to store the audio data
-    private audioBufferSize: number // Keep track of the buffer size
     private audioAnalysisData: AudioAnalysis // Keep updating the full audio analysis data with latest events
     private packetCount: number = 0
     private logger?: ConsoleLike
+    private compressedMediaRecorder: MediaRecorder | null = null
+    private compressedChunks: Blob[] = []
+    private compressedSize: number = 0
+    private pendingCompressedChunk: Blob | null = null
+    private readonly wavMimeType = 'audio/wav'
 
     constructor({
         audioContext,
@@ -77,7 +88,6 @@ export class WebRecorder {
         this.emitAudioEventCallback = emitAudioEventCallback
         this.emitAudioAnalysisCallback = emitAudioAnalysisCallback
         this.config = recordingConfig
-        this.position = 0
         this.logger = logger
 
         const audioContextFormat = this.checkAudioContextFormat({
@@ -100,10 +110,6 @@ export class WebRecorder {
             audioContextFormat.bitDepth ||
             DEFAULT_WEB_BITDEPTH
 
-        // Initialize the audio buffer separately
-        this.audioBuffer = new Float32Array(0)
-        this.audioBufferSize = 0
-
         this.audioAnalysisData = {
             amplitudeRange: { min: 0, max: 0 },
             dataPoints: [],
@@ -121,6 +127,11 @@ export class WebRecorder {
         if (recordingConfig.enableProcessing) {
             this.initFeatureExtractorWorker()
         }
+
+        // Initialize compressed recording if enabled
+        if (recordingConfig.compression?.enabled) {
+            this.initializeCompressedRecorder()
+        }
     }
 
     async init() {
@@ -145,80 +156,69 @@ export class WebRecorder {
                 event: AudioWorkletEvent
             ) => {
                 const command = event.data.command
-                if (command !== 'newData') {
-                    return
-                }
-                const pcmBufferFloat = event.data.recordedData
+                if (command !== 'newData') return
 
+                const pcmBufferFloat = event.data.recordedData
                 if (!pcmBufferFloat) {
                     this.logger?.warn('Received empty audio buffer', event)
                     return
                 }
 
-                // Handle the audio blob (e.g., send it to the server or process it further)
-                this.logger?.debug(
-                    `Received audio blob from processor len:${pcmBufferFloat?.length}`,
-                    event
-                )
-                // Concatenate the incoming Float32Array to the existing buffer
-                const newBuffer = new Float32Array(
-                    this.audioBufferSize + pcmBufferFloat.length
-                )
-                newBuffer.set(this.audioBuffer, 0)
-                newBuffer.set(pcmBufferFloat, this.audioBufferSize)
-                this.audioBuffer = newBuffer
-                this.audioBufferSize += pcmBufferFloat.length
-
+                // Process data in smaller chunks and emit immediately
+                const chunkSize = this.audioContext.sampleRate * 2 // Reduce to 2 seconds chunks
                 const sampleRate =
                     event.data.sampleRate ?? this.audioContext.sampleRate
-                const duration = pcmBufferFloat.length / sampleRate // Calculate duration of the current buffer
-
-                let data: Float32Array
-                if (this.packetCount === 0) {
-                    // Initialize WAV header
-                    const wavHeaderBuffer = writeWavHeader({
-                        sampleRate: this.audioContext.sampleRate,
-                        numChannels: this.numberOfChannels,
-                        bitDepth: this.exportBitDepth,
-                    })
+                const duration = pcmBufferFloat.length / sampleRate
+
+                // Emit chunks without storing them
+                for (let i = 0; i < pcmBufferFloat.length; i += chunkSize) {
+                    const chunk = pcmBufferFloat.slice(i, i + chunkSize)
+                    const chunkPosition = this.position + i / sampleRate
+
+                    // Process features if enabled
+                    if (
+                        this.config.enableProcessing &&
+                        this.featureExtractorWorker
+                    ) {
+                        this.featureExtractorWorker.postMessage(
+                            {
+                                command: 'process',
+                                channelData: chunk,
+                                sampleRate,
+                                pointsPerSecond:
+                                    this.config.pointsPerSecond ||
+                                    DEFAULT_WEB_POINTS_PER_SECOND,
+                                algorithm: this.config.algorithm || 'rms',
+                                bitDepth: this.bitDepth,
+                                fullAudioDurationMs: this.position * 1000,
+                                numberOfChannels: this.numberOfChannels,
+                                features: this.config.features,
+                            },
+                            []
+                        )
+                    }
 
-                    // For the first packet, combine WAV header with audio data
-                    const headerFloatArray = new Float32Array(wavHeaderBuffer)
-                    data = new Float32Array(
-                        headerFloatArray.length + this.audioBuffer.length
-                    )
-                    data.set(headerFloatArray, 0)
-                    data.set(this.audioBuffer, headerFloatArray.length)
-                } else {
-                    // For subsequent packets, just send the new audio data
-                    data = pcmBufferFloat
+                    // Emit chunk immediately
+                    this.emitAudioEventCallback({
+                        data: chunk,
+                        position: chunkPosition,
+                        compression: this.pendingCompressedChunk
+                            ? {
+                                  data: this.pendingCompressedChunk,
+                                  size: this.pendingCompressedChunk.size,
+                                  totalSize: this.compressedSize,
+                                  mimeType: 'audio/webm',
+                                  format: 'opus',
+                                  bitrate:
+                                      this.config.compression?.bitrate ??
+                                      128000,
+                              }
+                            : undefined,
+                    })
                 }
 
-                // Track the number of packets
-                this.packetCount += 1
-
-                this.emitAudioEventCallback({
-                    data,
-                    position: this.position,
-                })
-                this.position += duration // Update position
-
-                this.featureExtractorWorker?.postMessage(
-                    {
-                        command: 'process',
-                        channelData: pcmBufferFloat,
-                        sampleRate,
-                        pointsPerSecond:
-                            this.config.pointsPerSecond ||
-                            DEFAULT_WEB_POINTS_PER_SECOND,
-                        algorithm: this.config.algorithm || 'rms',
-                        bitDepth: this.bitDepth,
-                        fullAudioDurationMs: this.position * 1000,
-                        numberOfChannels: this.numberOfChannels,
-                        features: this.config.features,
-                    },
-                    []
-                )
+                this.position += duration
+                this.pendingCompressedChunk = null
             }
 
             this.logger?.debug(
@@ -227,7 +227,7 @@ export class WebRecorder {
             )
             this.audioWorkletNode.port.postMessage({
                 command: 'init',
-                recordSampleRate: this.audioContext.sampleRate, // Pass the original sample rate
+                recordSampleRate: this.audioContext.sampleRate,
                 exportSampleRate:
                     this.config.sampleRate ?? this.audioContext.sampleRate,
                 bitDepth: this.bitDepth,
@@ -331,82 +331,146 @@ export class WebRecorder {
         this.source.connect(this.audioWorkletNode)
         this.audioWorkletNode.connect(this.audioContext.destination)
         this.packetCount = 0
+
+        if (this.compressedMediaRecorder) {
+            this.compressedMediaRecorder.start(this.config.interval ?? 1000)
+        }
     }
 
-    stop(): Promise<Float32Array> {
-        return new Promise((resolve, reject) => {
-            try {
-                if (this.audioWorkletNode) {
-                    // this.source.disconnect(this.audioWorkletNode);
-                    // this.audioWorkletNode.disconnect(this.audioContext.destination);
-                    this.audioWorkletNode.port.postMessage({ command: 'stop' })
-
-                    // Set a timeout to reject the promise if no message is received within 5 seconds
-                    const timeout = setTimeout(() => {
-                        this.audioWorkletNode.port.removeEventListener(
-                            'message',
-                            onMessage
-                        )
-                        reject(
-                            new Error(
-                                "Timeout error, audioWorkletNode didn't complete."
-                            )
-                        )
-                    }, 5000)
-
-                    // Listen for the recordedData message to confirm stopping
-                    const onMessage = async (event: AudioWorkletEvent) => {
-                        const command = event.data.command
-                        if (command === 'recordedData') {
-                            clearTimeout(timeout) // Clear the timeout
-
-                            const rawPCMDataFull =
-                                event.data.recordedData?.slice(0)
-
-                            if (!rawPCMDataFull) {
-                                reject(new Error('Failed to get recorded data'))
-                                return
-                            }
-
-                            // Compute duration of the recorded data
-                            const duration =
-                                rawPCMDataFull.byteLength /
-                                (this.audioContext.sampleRate *
-                                    (this.exportBitDepth /
-                                        this.numberOfChannels))
-                            this.logger?.debug(
-                                `Received recorded data -- Duration: ${duration} vs ${rawPCMDataFull.byteLength / this.audioContext.sampleRate} seconds`
-                            )
-                            this.logger?.debug(
-                                `recordedData.length=${rawPCMDataFull.byteLength} vs transmittedData.length=${this.audioBufferSize}`
-                            )
+    async stop(): Promise<{ pcmData: Float32Array; compressedBlob?: Blob }> {
+        try {
+            if (this.compressedMediaRecorder) {
+                this.compressedMediaRecorder.stop()
+                return {
+                    pcmData: new Float32Array(), // Return empty array since we're streaming
+                    compressedBlob: new Blob(this.compressedChunks, {
+                        type: 'audio/webm;codecs=opus',
+                    }),
+                }
+            }
+            return { pcmData: new Float32Array() }
+        } finally {
+            this.cleanup()
+        }
+    }
 
-                            // Remove the event listener after receiving the final data
-                            this.audioWorkletNode.port.removeEventListener(
-                                'message',
-                                onMessage
-                            )
+    private cleanup() {
+        if (this.audioContext) {
+            this.audioContext.close()
+        }
+        if (this.audioWorkletNode) {
+            this.audioWorkletNode.disconnect()
+        }
+        if (this.source) {
+            this.source.disconnect()
+        }
+        this.stopMediaStreamTracks()
+    }
 
-                            const convertedPCM = await convertPCMToFloat32({
-                                buffer: rawPCMDataFull.buffer,
-                                skipWavHeader: true,
-                                bitDepth: this.exportBitDepth,
-                            })
+    // Helper method to process recording stop
+    private async processRecordingStop(): Promise<{
+        pcmData: Float32Array
+        compressedBlob?: Blob
+    }> {
+        const processStartTime = performance.now()
+        this.logger?.debug('[Performance] Starting recording stop process')
+
+        const [compressedData, workletData] = await Promise.all([
+            this.stopCompressedRecording(),
+            this.stopAudioWorklet(),
+        ])
+
+        this.logger?.debug(
+            `[Performance] Recording stop process completed in ${performance.now() - processStartTime}ms`
+        )
+        return {
+            pcmData:
+                workletData ??
+                new Float32Array(this.audioAnalysisData.dataPoints.length),
+            compressedBlob: compressedData,
+        }
+    }
 
-                            resolve(convertedPCM.pcmValues) // Resolve the promise with the collected buffers
-                        }
-                    }
-                    this.audioWorkletNode.port.addEventListener(
+    // Helper method to stop compressed recording
+    private stopCompressedRecording(): Promise<Blob | undefined> {
+        const startTime = performance.now()
+        this.logger?.debug(
+            `[Performance][${STOP_PERFORMANCE_MARKS.COMPRESSED_RECORDING_STOP}] Starting compressed recording stop`
+        )
+
+        if (!this.compressedMediaRecorder) {
+            this.logger?.debug('[Performance] No compressed recorder to stop')
+            return Promise.resolve(undefined)
+        }
+
+        return new Promise((resolve) => {
+            this.compressedMediaRecorder!.onstop = () => {
+                const blob = new Blob(this.compressedChunks, {
+                    type: 'audio/webm;codecs=opus',
+                })
+                this.logger?.debug(
+                    `[Performance][${STOP_PERFORMANCE_MARKS.COMPRESSED_RECORDING_STOP}] Compressed recording stopped in ${performance.now() - startTime}ms, size: ${blob.size}`
+                )
+                resolve(blob)
+            }
+            this.compressedMediaRecorder!.stop()
+        })
+    }
+
+    // Helper method to stop audio worklet
+    private stopAudioWorklet(): Promise<Float32Array | undefined> {
+        const startTime = performance.now()
+        this.logger?.debug(
+            `[Performance][${STOP_PERFORMANCE_MARKS.AUDIO_WORKLET_STOP}] Starting audio worklet stop`
+        )
+
+        if (!this.audioWorkletNode) {
+            this.logger?.debug('[Performance] No audio worklet to stop')
+            return Promise.resolve(undefined)
+        }
+
+        return new Promise((resolve) => {
+            const onMessage = (event: AudioWorkletEvent) => {
+                if (event.data.command === 'recordedData') {
+                    this.audioWorkletNode?.port.removeEventListener(
                         'message',
                         onMessage
                     )
-                }
+                    const rawPCMDataFull = event.data.recordedData?.slice(0)
+
+                    if (!rawPCMDataFull) {
+                        this.logger?.debug('[Performance] No PCM data received')
+                        resolve(undefined)
+                        return
+                    }
 
-                // Stop all media stream tracks to stop the browser recording
-                this.stopMediaStreamTracks()
-            } catch (error) {
-                reject(error)
+                    if (this.exportBitDepth !== this.bitDepth) {
+                        const conversionStart = performance.now()
+                        convertPCMToFloat32({
+                            buffer: rawPCMDataFull.buffer,
+                            bitDepth: this.exportBitDepth,
+                            skipWavHeader: true,
+                            logger: this.logger,
+                        }).then(({ pcmValues }) => {
+                            this.logger?.debug(
+                                `[Performance] PCM conversion completed in ${performance.now() - conversionStart}ms`
+                            )
+                            this.logger?.debug(
+                                `[Performance][${STOP_PERFORMANCE_MARKS.AUDIO_WORKLET_STOP}] Audio worklet stopped in ${performance.now() - startTime}ms`
+                            )
+                            resolve(pcmValues)
+                        })
+                    } else {
+                        this.logger?.debug(
+                            `[Performance][${STOP_PERFORMANCE_MARKS.AUDIO_WORKLET_STOP}] Audio worklet stopped in ${performance.now() - startTime}ms`
+                        )
+                        resolve(rawPCMDataFull)
+                    }
+                }
             }
+
+            this.audioWorkletNode.port.addEventListener('message', onMessage)
+            this.audioWorkletNode.port.postMessage({ command: 'stop' })
         })
     }
 
@@ -414,6 +478,7 @@ export class WebRecorder {
         this.source.disconnect(this.audioWorkletNode) // Disconnect the source from the AudioWorkletNode
         this.audioWorkletNode.disconnect(this.audioContext.destination) // Disconnect the AudioWorkletNode from the destination
         this.audioWorkletNode.port.postMessage({ command: 'pause' })
+        this.compressedMediaRecorder?.pause()
     }
 
     stopMediaStreamTracks() {
@@ -484,5 +549,40 @@ export class WebRecorder {
         this.source.connect(this.audioWorkletNode)
         this.audioWorkletNode.connect(this.audioContext.destination)
         this.audioWorkletNode.port.postMessage({ command: 'resume' })
+        this.compressedMediaRecorder?.resume()
+    }
+
+    private initializeCompressedRecorder() {
+        try {
+            const mimeType = 'audio/webm;codecs=opus'
+            if (!MediaRecorder.isTypeSupported(mimeType)) {
+                this.logger?.warn(
+                    'Opus compression not supported in this browser'
+                )
+                return
+            }
+
+            this.compressedMediaRecorder = new MediaRecorder(
+                this.source.mediaStream,
+                {
+                    mimeType,
+                    audioBitsPerSecond:
+                        this.config.compression?.bitrate ?? 128000,
+                }
+            )
+
+            this.compressedMediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.compressedChunks.push(event.data)
+                    this.compressedSize += event.data.size
+                    this.pendingCompressedChunk = event.data
+                }
+            }
+        } catch (error) {
+            this.logger?.error(
+                'Failed to initialize compressed recorder:',
+                error
+            )
+        }
     }
 }

package/src/events.ts

@@ -7,6 +7,7 @@ import ExpoAudioStreamModule from './ExpoAudioStreamModule'
 
 const emitter = new LegacyEventEmitter(ExpoAudioStreamModule)
 
+// Internal event payload from native module
 export interface AudioEventPayload {
     encoded?: string
     buffer?: Float32Array
@@ -17,6 +18,12 @@ export interface AudioEventPayload {
     totalSize: number
     mimeType: string
     streamUuid: string
+    compression?: {
+        data?: string | Blob // Base64 (native) or Float32Array (web) encoded compressed data chunk
+        position: number
+        eventDataSize: number
+        totalSize: number
+    }
 }
 
 export function addAudioEventListener(

package/src/useAudioRecorder.tsx

@@ -7,6 +7,7 @@ import {
     AudioDataEvent,
     AudioRecording,
     AudioStreamStatus,
+    CompressionInfo,
     ConsoleLike,
     RecordingConfig,
     StartRecordingResult,
@@ -31,8 +32,9 @@ export interface UseAudioRecorderState {
     resumeRecording: () => Promise<void>
     isRecording: boolean
     isPaused: boolean
-    durationMs: number // Duration of the recording
-    size: number // Size in bytes of the recorded audio
+    durationMs: number
+    size: number
+    compression?: CompressionInfo
     analysisData?: AudioAnalysis
 }
 
@@ -41,6 +43,7 @@ interface RecorderReducerState {
     isPaused: boolean
     durationMs: number
     size: number
+    compression?: CompressionInfo
     analysisData?: AudioAnalysis
 }
 
@@ -53,7 +56,14 @@ type RecorderAction =
               isPaused: boolean
           }
       }
-    | { type: 'UPDATE_STATUS'; payload: { durationMs: number; size: number } }
+    | {
+          type: 'UPDATE_STATUS'
+          payload: {
+              durationMs: number
+              size: number
+              compression?: CompressionInfo
+          }
+      }
     | { type: 'UPDATE_ANALYSIS'; payload: AudioAnalysis }
 
 const defaultAnalysis: AudioAnalysis = {
@@ -84,7 +94,8 @@ function audioRecorderReducer(
                 isPaused: false,
                 durationMs: 0,
                 size: 0,
-                analysisData: defaultAnalysis, // Reset analysis data
+                compression: undefined,
+                analysisData: defaultAnalysis,
             }
         case 'STOP':
             return { ...state, isRecording: false, isPaused: false }
@@ -98,12 +109,22 @@ function audioRecorderReducer(
                 isPaused: action.payload.isPaused,
                 isRecording: action.payload.isRecording,
             }
-        case 'UPDATE_STATUS':
-            return {
+        case 'UPDATE_STATUS': {
+            const newState = {
                 ...state,
                 durationMs: action.payload.durationMs,
                 size: action.payload.size,
+                compression: action.payload.compression
+                    ? {
+                          size: action.payload.compression.size,
+                          mimeType: action.payload.compression.mimeType,
+                          bitrate: action.payload.compression.bitrate,
+                          format: action.payload.compression.format,
+                      }
+                    : undefined,
             }
+            return newState
+        }
         case 'UPDATE_ANALYSIS':
             return {
                 ...state,
@@ -129,9 +150,12 @@ export function useAudioRecorder({
         isPaused: false,
         durationMs: 0,
         size: 0,
+        compression: undefined,
         analysisData: undefined,
     })
 
+    const startResultRef = useRef<StartRecordingResult | null>(null)
+
     const analysisListenerRef = useRef<EventSubscription | null>(null)
     // analysisRef is the current analysis data (last 10 seconds by default)
     const analysisRef = useRef<AudioAnalysis>({ ...defaultAnalysis })
@@ -261,6 +285,7 @@ export function useAudioRecorder({
                 encoded,
                 mimeType,
                 buffer,
+                compression,
             } = eventData
             logger?.debug(`[handleAudioEvent] Received audio event:`, {
                 fileUri,
@@ -271,6 +296,7 @@ export function useAudioRecorder({
                 lastEmittedSize,
                 streamUuid,
                 encodedLength: encoded?.length,
+                compression,
             })
             if (deltaSize === 0) {
                 // Ignore packet with no data
@@ -290,6 +316,21 @@ export function useAudioRecorder({
                         fileUri,
                         eventDataSize: deltaSize,
                         totalSize,
+                        compression:
+                            compression && startResultRef.current?.compression
+                                ? {
+                                      data: compression.data,
+                                      size: compression.totalSize,
+                                      mimeType:
+                                          startResultRef.current.compression
+                                              ?.mimeType,
+                                      bitrate:
+                                          startResultRef.current.compression
+                                              ?.bitrate,
+                                      format: startResultRef.current.compression
+                                          ?.format,
+                                  }
+                                : undefined,
                     })
                 } else if (buffer) {
                     // Coming from web
@@ -299,6 +340,21 @@ export function useAudioRecorder({
                         fileUri,
                         eventDataSize: deltaSize,
                         totalSize,
+                        compression:
+                            compression && startResultRef.current?.compression
+                                ? {
+                                      data: compression.data,
+                                      size: compression.totalSize,
+                                      mimeType:
+                                          startResultRef.current.compression
+                                              ?.mimeType,
+                                      bitrate:
+                                          startResultRef.current.compression
+                                              ?.bitrate,
+                                      format: startResultRef.current.compression
+                                          ?.format,
+                                  }
+                                : undefined,
                     }
                     onAudioStreamRef.current?.(webEvent)
                     logger?.debug(
@@ -317,7 +373,8 @@ export function useAudioRecorder({
         try {
             const status: AudioStreamStatus = ExpoAudioStream.status()
             logger?.debug(
-                `Status: paused: ${status.isPaused} durationMs: ${status.durationMs} size: ${status.size}`
+                `Status: paused: ${status.isPaused} durationMs: ${status.durationMs} size: ${status.size}`,
+                status.compression
             )
 
             // Check and update recording state
@@ -344,6 +401,7 @@ export function useAudioRecorder({
                     payload: {
                         durationMs: status.durationMs,
                         size: status.size,
+                        compression: status.compression,
                     },
                 })
             }
@@ -372,6 +430,8 @@ export function useAudioRecorder({
                 await ExpoAudioStream.startRecording(options)
             dispatch({ type: 'START' })
 
+            startResultRef.current = startResult
+
             if (enableProcessing) {
                 logger?.debug(`Enabling audio analysis listener`)
                 const listener = addAudioAnalysisListener(
@@ -466,6 +526,7 @@ export function useAudioRecorder({
         isRecording: state.isRecording,
         durationMs: state.durationMs,
         size: state.size,
+        compression: state.compression,
         analysisData: state.analysisData,
     }
 }