@siteed/expo-audio-studio 2.5.0 → 2.6.1

package/src/ExpoAudioStream.types.ts

@@ -207,6 +207,19 @@ export interface IOSConfig {
     audioSession?: AudioSessionConfig
 }
 
+/** Web platform specific configuration options */
+export interface WebConfig {
+    /**
+     * Whether to store uncompressed audio data for WAV generation
+     *
+     * When true, all PCM chunks are stored in memory to create a WAV file when compression is disabled
+     * When false, uncompressed audio won't be available, but memory usage will be lower
+     *
+     * Default: true (for backward compatibility)
+     */
+    storeUncompressedAudio?: boolean
+}
+
 // Add new type for interruption reasons
 export type RecordingInterruptionReason =
     /** Audio focus was lost to another app */
@@ -312,6 +325,9 @@ export interface RecordingConfig {
     /** iOS-specific configuration */
     ios?: IOSConfig
 
+    /** Web-specific configuration options */
+    web?: WebConfig
+
     /** Duration of each segment in milliseconds for analysis (default: 100) */
     segmentDurationMs?: number
 
@@ -328,7 +344,11 @@ export interface RecordingConfig {
     compression?: {
         /** Enable audio compression */
         enabled: boolean
-        /** Format for compression (aac or opus) */
+        /**
+         * Format for compression
+         * - 'aac': Advanced Audio Coding - supported on all platforms
+         * - 'opus': Opus encoding - supported on Android and Web; on iOS will automatically fall back to AAC
+         */
         format: 'aac' | 'opus'
         /** Bitrate for compression in bits per second */
         bitrate?: number

package/src/ExpoAudioStream.web.ts

@@ -113,7 +113,56 @@ export class ExpoAudioStreamWeb extends LegacyEventEmitter {
     // Utility to handle user media stream
     async getMediaStream() {
         try {
-            return await navigator.mediaDevices.getUserMedia({ audio: true })
+            this.logger?.debug('Requesting user media (microphone)...')
+
+            // First check if the browser supports the necessary audio APIs
+            if (!navigator?.mediaDevices?.getUserMedia) {
+                this.logger?.error(
+                    'Browser does not support mediaDevices.getUserMedia'
+                )
+                throw new Error('Browser does not support audio recording')
+            }
+
+            // Get media with detailed audio constraints for better diagnostics
+            const constraints = {
+                audio: {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true,
+                    // Add deviceId constraint if specified
+                    ...(this.recordingConfig?.deviceId
+                        ? {
+                              deviceId: {
+                                  exact: this.recordingConfig.deviceId,
+                              },
+                          }
+                        : {}),
+                },
+            }
+
+            this.logger?.debug('Media constraints:', constraints)
+
+            const stream =
+                await navigator.mediaDevices.getUserMedia(constraints)
+
+            // Get detailed info about the audio track for debugging
+            const audioTracks = stream.getAudioTracks()
+            if (audioTracks.length > 0) {
+                const track = audioTracks[0]
+                const settings = track.getSettings()
+                this.logger?.debug('Audio track obtained:', {
+                    label: track.label,
+                    id: track.id,
+                    enabled: track.enabled,
+                    muted: track.muted,
+                    readyState: track.readyState,
+                    settings,
+                })
+            } else {
+                this.logger?.warn('Stream has no audio tracks!')
+            }
+
+            return stream
         } catch (error) {
             this.logger?.error('Failed to get media stream:', error)
             throw error
@@ -400,7 +449,8 @@ export class ExpoAudioStreamWeb extends LegacyEventEmitter {
         this.logger?.debug('Starting stop process')
 
         try {
-            const { compressedBlob } = await this.customRecorder.stop()
+            const { compressedBlob, uncompressedBlob } =
+                await this.customRecorder.stop()
 
             this.isRecording = false
             this.isPaused = false
@@ -409,20 +459,52 @@ export class ExpoAudioStreamWeb extends LegacyEventEmitter {
             let fileUri = `${this.streamUuid}.${this.extension}`
             let mimeType = `audio/${this.extension}`
 
-            // Process compressed audio if available
-            if (compressedBlob && this.recordingConfig?.compression?.enabled) {
+            // Handle both compressed and uncompressed blobs according to configuration
+            const compressionEnabled =
+                this.recordingConfig?.compression?.enabled ?? false
+
+            // Process compressed blob if available
+            if (compressedBlob) {
                 const compressedUri = URL.createObjectURL(compressedBlob)
-                compression = {
+                const compressedInfo = {
                     compressedFileUri: compressedUri,
                     size: compressedBlob.size,
                     mimeType: 'audio/webm',
                     format: 'opus',
-                    bitrate: this.recordingConfig.compression.bitrate ?? 128000,
+                    bitrate:
+                        this.recordingConfig?.compression?.bitrate ?? 128000,
                 }
 
-                // Use compressed values when compression is enabled
-                fileUri = compressedUri
-                mimeType = 'audio/webm'
+                // If compression is enabled, use compressed blob as primary format
+                if (compressionEnabled) {
+                    this.logger?.debug(
+                        'Using compressed audio as primary output'
+                    )
+                    fileUri = compressedUri
+                    mimeType = 'audio/webm'
+
+                    // Store compression info
+                    compression = compressedInfo
+                } else {
+                    // Compression was enabled during recording but not set as primary
+                    // Store as alternate format
+                    compression = compressedInfo
+                }
+            }
+
+            // Process uncompressed WAV if available
+            if (uncompressedBlob) {
+                const wavUri = URL.createObjectURL(uncompressedBlob)
+
+                // If compression is disabled or no compressed blob is available,
+                // use WAV as primary format
+                if (!compressionEnabled || !compressedBlob) {
+                    this.logger?.debug(
+                        'Using uncompressed WAV as primary output'
+                    )
+                    fileUri = wavUri
+                    mimeType = 'audio/wav'
+                }
             }
 
             // Use the stored streamUuid for the final filename
@@ -443,6 +525,14 @@ export class ExpoAudioStreamWeb extends LegacyEventEmitter {
             // Reset after creating the result
             this.streamUuid = null
 
+            // Reset recording state variables to prepare for next recording
+            this.currentDurationMs = 0
+            this.currentSize = 0
+            this.lastEmittedSize = 0
+            this.totalCompressedSize = 0
+            this.lastEmittedCompressionSize = 0
+            this.audioChunks = []
+
             return result
         } catch (error) {
             this.logger?.error('Error stopping recording:', error)

package/src/WebRecorder.web.ts

@@ -7,6 +7,7 @@ import {
     EmitAudioEventFunction,
 } from './ExpoAudioStream.web'
 import { encodingToBitDepth } from './utils/encodingToBitDepth'
+import { writeWavHeader } from './utils/writeWavHeader'
 import { InlineFeaturesExtractor } from './workers/InlineFeaturesExtractor.web'
 import { InlineAudioWebWorker } from './workers/inlineAudioWebWorker.web'
 
@@ -16,6 +17,7 @@ interface AudioWorkletEvent {
         recordedData?: Float32Array
         sampleRate?: number
         position?: number
+        message?: string // For debug messages
     }
 }
 
@@ -60,6 +62,8 @@ export class WebRecorder {
         timestamp: number
     }) => void
     private _isDeviceDisconnected: boolean = false
+    private pcmData: Float32Array | null = null // Store original PCM data
+    private totalSampleCount: number = 0
 
     /**
      * Flag to indicate whether this is the first audio chunk after a device switch
@@ -183,6 +187,11 @@ export class WebRecorder {
                 event: AudioWorkletEvent
             ) => {
                 const command = event.data.command
+                if (command === 'debug') {
+                    this.logger?.debug(`[AudioWorklet] ${event.data.message}`)
+                    return
+                }
+
                 if (command !== 'newData') return
 
                 const pcmBufferFloat = event.data.recordedData
@@ -192,9 +201,11 @@ export class WebRecorder {
                 }
 
                 // 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
+                // Use chunk size from config interval or default to 2 seconds
+                const intervalMs = this.config.interval ?? DEFAULT_WEB_INTERVAL
+                const chunkSize = Math.floor(sampleRate * (intervalMs / 1000))
                 const duration = pcmBufferFloat.length / sampleRate
 
                 // Use incoming position if provided by worklet, otherwise use our tracked position
@@ -241,6 +252,17 @@ export class WebRecorder {
                         })
                     }
 
+                    // Only store PCM data if web.storeUncompressedAudio is not explicitly false
+                    const shouldStoreUncompressed =
+                        this.config.web?.storeUncompressedAudio !== false
+
+                    // Store PCM chunks when needed
+                    if (shouldStoreUncompressed) {
+                        // Store the original Float32Array data for later WAV creation
+                        this.appendPcmData(chunk)
+                        this.totalSampleCount += chunk.length
+                    }
+
                     // Emit chunk immediately
                     this.emitAudioEventCallback({
                         data: chunk,
@@ -265,21 +287,42 @@ export class WebRecorder {
                 this.pendingCompressedChunk = null
             }
 
-            this.logger?.debug(
-                `WebRecorder initialized -- recordSampleRate=${this.audioContext.sampleRate}, startPosition=${this.position}`,
-                this.config
-            )
+            // Ensure we use all relevant settings from config
+            const recordSampleRate = this.audioContext.sampleRate
+            const exportSampleRate =
+                this.config.sampleRate ?? this.audioContext.sampleRate
+            const channels = this.config.channels ?? this.numberOfChannels
+            const interval = this.config.interval ?? DEFAULT_WEB_INTERVAL
+
+            this.logger?.debug(`WebRecorder initialized with config:`, {
+                recordSampleRate,
+                exportSampleRate,
+                bitDepth: this.bitDepth,
+                exportBitDepth: this.exportBitDepth,
+                channels,
+                interval,
+                position: this.position,
+                deviceId: this.config.deviceId || 'default',
+                compression: this.config.compression
+                    ? {
+                          enabled: this.config.compression.enabled,
+                          format: this.config.compression.format,
+                          bitrate: this.config.compression.bitrate,
+                      }
+                    : 'disabled',
+            })
+
+            // Initialize the worklet with all settings from config
             this.audioWorkletNode.port.postMessage({
                 command: 'init',
-                recordSampleRate: this.audioContext.sampleRate,
-                exportSampleRate:
-                    this.config.sampleRate ?? this.audioContext.sampleRate,
+                recordSampleRate,
+                exportSampleRate,
                 bitDepth: this.bitDepth,
                 exportBitDepth: this.exportBitDepth,
-                channels: this.numberOfChannels,
-                interval: this.config.interval ?? DEFAULT_WEB_INTERVAL,
+                channels,
+                interval,
                 position: this.position, // Pass the current position to the processor
-                // enableLogging: !!this.logger,
+                enableLogging: true,
             })
 
             // Connect the source to the AudioWorkletNode and start recording
@@ -290,6 +333,35 @@ export class WebRecorder {
         }
     }
 
+    /**
+     * Append new PCM data to the existing buffer
+     * @param newData New Float32Array data to append
+     */
+    private appendPcmData(newData: Float32Array): void {
+        // Clone the incoming data to ensure it's not modified
+        const dataToAdd = new Float32Array(newData)
+
+        if (!this.pcmData) {
+            // First chunk - create a copy to avoid references to original data
+            this.pcmData = new Float32Array(dataToAdd)
+            return
+        }
+
+        // Create a new buffer with increased size
+        const newBuffer = new Float32Array(
+            this.pcmData.length + dataToAdd.length
+        )
+
+        // Copy existing data
+        newBuffer.set(this.pcmData)
+
+        // Append new data
+        newBuffer.set(dataToAdd, this.pcmData.length)
+
+        // Replace existing buffer
+        this.pcmData = newBuffer
+    }
+
     /**
      * Initializes the feature extractor worker for audio analysis
      * Creates an inline worker from a blob for audio feature extraction
@@ -492,6 +564,10 @@ export class WebRecorder {
             )
             this.resetDataPointCounter(0) // Explicitly reset to 0 for new recordings
             this.isFirstChunkAfterSwitch = false
+
+            // Clear PCM data for new recording
+            this.pcmData = null
+            this.totalSampleCount = 0
         } else {
             this.logger?.debug(
                 `Preserving counter at ${this.dataPointIdCounter} during device switch`
@@ -504,17 +580,55 @@ export class WebRecorder {
     }
 
     /**
-     * Stops the audio recording process and returns the recorded data
-     * @param externalAudioChunks Optional array of Float32Array chunks from previous devices
-     * @returns Promise resolving to an object containing PCM data and optional compressed blob
+     * Creates a WAV file from the stored PCM data
      */
-    async stop(
-        externalAudioChunks?: Float32Array[]
-    ): Promise<{ pcmData: Float32Array; compressedBlob?: Blob }> {
+    private createWavFromPcmData(): Blob | null {
         try {
-            // Log what's happening for debugging
-            this.logger?.debug('Stopping recording and collecting final data')
+            // Check if we have PCM data
+            if (!this.pcmData || this.pcmData.length === 0) {
+                this.logger?.warn('No PCM data available to create WAV file')
+                return null
+            }
+
+            const sampleRate =
+                this.config.sampleRate || this.audioContext.sampleRate
+            const channels = this.numberOfChannels || 1
+
+            // Convert float32 PCM data to 16-bit PCM for WAV
+            const bytesPerSample = 2 // 16-bit = 2 bytes
+            const dataLength = this.pcmData.length * bytesPerSample
+            const buffer = new ArrayBuffer(dataLength)
+            const view = new DataView(buffer)
+
+            // Convert Float32Array (-1 to 1) to Int16Array (-32768 to 32767)
+            for (let i = 0; i < this.pcmData.length; i++) {
+                const sample = Math.max(-1, Math.min(1, this.pcmData[i]))
+                const int16Value = Math.round(sample * 32767)
+                view.setInt16(i * 2, int16Value, true)
+            }
+
+            // Use the existing writeWavHeader utility to add a WAV header
+            const wavBuffer = writeWavHeader({
+                buffer,
+                sampleRate,
+                numChannels: channels,
+                bitDepth: 16,
+                isFloat: false,
+            })
 
+            return new Blob([wavBuffer], { type: 'audio/wav' })
+        } catch (error) {
+            this.logger?.error('Error creating WAV file from PCM data:', error)
+            return null
+        }
+    }
+
+    /**
+     * Stops the audio recording process and returns the recorded data
+     * @returns Promise resolving to an object containing compressed and/or uncompressed blobs
+     */
+    async stop(): Promise<{ compressedBlob?: Blob; uncompressedBlob?: Blob }> {
+        try {
             // Stop any compressed recording first
             if (
                 this.compressedMediaRecorder &&
@@ -529,15 +643,24 @@ export class WebRecorder {
                 await new Promise((resolve) => setTimeout(resolve, 100))
             }
 
-            // Return the compressed blob if available
+            // Create uncompressed WAV file from the PCM data
+            let uncompressedBlob: Blob | undefined
+
+            // Only create WAV if we have PCM data
+            if (this.pcmData && this.pcmData.length > 0) {
+                uncompressedBlob =
+                    (await this.createWavFromPcmData()) || undefined
+            }
+
+            // Return the compressed and/or uncompressed blobs if available
             return {
-                pcmData: new Float32Array(), // Return empty array since we're streaming
                 compressedBlob:
                     this.compressedChunks.length > 0
                         ? new Blob(this.compressedChunks, {
                               type: 'audio/webm;codecs=opus',
                           })
                         : undefined,
+                uncompressedBlob,
             }
         } finally {
             this.cleanup()
@@ -545,6 +668,8 @@ export class WebRecorder {
             this.compressedChunks = []
             this.compressedSize = 0
             this.pendingCompressedChunk = null
+            this.pcmData = null
+            this.totalSampleCount = 0
         }
     }
 

package/src/useAudioRecorder.tsx

@@ -212,8 +212,7 @@ export function useAudioRecorder({
             const maxDuration = visualizationDuration
 
             logger?.debug(
-                `[handleAudioAnalysis] Received audio analysis: maxDuration=${maxDuration} analysis.dataPoints=${analysis.dataPoints.length} analysisData.dataPoints=${savedAnalysisData.dataPoints.length}`,
-                analysis
+                `[handleAudioAnalysis] Received audio analysis: maxDuration=${maxDuration} analysis.dataPoints=${analysis.dataPoints.length} analysisData.dataPoints=${savedAnalysisData.dataPoints.length}`
             )
 
             // Combine data points

package/src/utils/writeWavHeader.ts

@@ -12,6 +12,8 @@ export interface WavHeaderOptions {
     numChannels: number
     /** The bit depth of the audio (e.g., 16, 24, or 32). */
     bitDepth: number
+    /** Whether the audio data is in float format (only applies to 32-bit) */
+    isFloat?: boolean
 }
 
 /**
@@ -30,30 +32,17 @@ export interface WavHeaderOptions {
  * @returns An ArrayBuffer containing the WAV header, or the header combined with the provided audio data.
  *
  * @throws {Error} Throws an error if the provided options are invalid or if the buffer is too small.
- *
- * @example
- * // Create a standalone WAV header
- * const header = writeWavHeader({
- *   sampleRate: 44100,
- *   numChannels: 2,
- *   bitDepth: 16
- * });
- *
- * @example
- * // Create a WAV header and combine it with audio data
- * const completeWav = writeWavHeader({
- *   buffer: audioData,
- *   sampleRate: 44100,
- *   numChannels: 2,
- *   bitDepth: 16
- * });
  */
 export const writeWavHeader = ({
     buffer,
     sampleRate,
     numChannels,
     bitDepth,
+    isFloat = bitDepth === 32, // Default to float for 32-bit
 }: WavHeaderOptions): ArrayBuffer => {
+    // For 32-bit float, we use format 3, otherwise format 1 for PCM
+    const audioFormat = isFloat ? 3 : 1 // 3 = IEEE float, 1 = PCM
+
     const bytesPerSample = bitDepth / 8
     const blockAlign = numChannels * bytesPerSample
     const byteRate = sampleRate * blockAlign
@@ -67,22 +56,30 @@ export const writeWavHeader = ({
 
     // Function to write or update the header
     const writeHeader = (view: DataView, dataSize: number = 0xffffffff) => {
+        // RIFF chunk descriptor
         writeString(view, 0, 'RIFF') // ChunkID
-        view.setUint32(4, 36 + dataSize, true) // ChunkSize
+        view.setUint32(4, 36 + dataSize, true) // ChunkSize: 4 + (8 + 16) + (8 + dataSize)
         writeString(view, 8, 'WAVE') // Format
+
+        // "fmt " sub-chunk
         writeString(view, 12, 'fmt ') // Subchunk1ID
-        view.setUint32(16, 16, true) // Subchunk1Size (16 for PCM)
-        view.setUint16(20, bitDepth === 32 ? 3 : 1, true) // AudioFormat (3 for float, 1 for PCM)
+        view.setUint32(16, 16, true) // Subchunk1Size (16 for PCM/Float)
+        view.setUint16(20, audioFormat, true) // AudioFormat (3 for float, 1 for PCM)
         view.setUint16(22, numChannels, true) // NumChannels
         view.setUint32(24, sampleRate, true) // SampleRate
-        view.setUint32(28, byteRate, true) // ByteRate
-        view.setUint16(32, blockAlign, true) // BlockAlign
+        view.setUint32(28, byteRate, true) // ByteRate = SampleRate * NumChannels * BitsPerSample/8
+        view.setUint16(32, blockAlign, true) // BlockAlign = NumChannels * BitsPerSample/8
         view.setUint16(34, bitDepth, true) // BitsPerSample
+
+        // "data" sub-chunk
         writeString(view, 36, 'data') // Subchunk2ID
-        view.setUint32(40, dataSize, true) // Subchunk2Size
+        view.setUint32(40, dataSize, true) // Subchunk2Size = NumSamples * NumChannels * BitsPerSample/8
     }
 
     if (buffer) {
+        // Handle existing buffer
+
+        // Check for minimum size
         if (buffer.byteLength < 44) {
             throw new Error('Buffer is too small to contain a valid WAV header')
         }
@@ -97,15 +94,19 @@ export const writeWavHeader = ({
             writeHeader(view, buffer.byteLength - 44)
             return buffer
         } else {
-            // Combine the new header with the existing buffer
+            // Create a new buffer with header + data
             const newBuffer = new ArrayBuffer(44 + buffer.byteLength)
             const newView = new DataView(newBuffer)
+
+            // Write header to new buffer
             writeHeader(newView, buffer.byteLength)
+
+            // Copy audio data after header
             new Uint8Array(newBuffer).set(new Uint8Array(buffer), 44)
             return newBuffer
         }
     } else {
-        // Create a standalone header
+        // Create standalone header
         const headerBuffer = new ArrayBuffer(44)
         const view = new DataView(headerBuffer)
         writeHeader(view)