Update src/lib/audio-recorder.ts

src/lib/audio-recorder.ts

@@ -18,12 +18,27 @@ function arrayBufferToBase64(buffer: ArrayBuffer) {
   return window.btoa(binary);
 }
 
+// Add Safari-specific audio context creation
 async function createSafariAudioContext(sampleRate: number): Promise<AudioContext> {
   console.log('Creating Safari audio context with options:', { sampleRate });
+  
+  // Safari requires webkit prefix
   const AudioContextClass = (window as any).webkitAudioContext || window.AudioContext;
   console.log('Using AudioContext class:', AudioContextClass.name);
-  const ctx = new AudioContextClass({ sampleRate, latencyHint: 'interactive' });
-  console.log('Safari AudioContext initial state:', { state: ctx.state, sampleRate: ctx.sampleRate, baseLatency: ctx.baseLatency, destination: ctx.destination });
+  
+  const ctx = new AudioContextClass({
+    sampleRate,
+    latencyHint: 'interactive'
+  });
+  
+  console.log('Safari AudioContext initial state:', {
+    state: ctx.state,
+    sampleRate: ctx.sampleRate,
+    baseLatency: ctx.baseLatency,
+    destination: ctx.destination,
+  });
+
+  // Safari requires user interaction to start audio context
   if (ctx.state === 'suspended') {
     console.log('Attempting to resume suspended Safari audio context...');
     try {
@@ -34,6 +49,7 @@ async function createSafariAudioContext(sampleRate: number): Promise<AudioContex
       throw err;
     }
   }
+
   return ctx;
 }
 
@@ -54,133 +70,236 @@ export class AudioRecorder extends EventEmitter {
     super();
     this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
     this.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as any).MSStream;
-    console.log('AudioRecorder initialized:', { isSafari: this.isSafari, isIOS: this.isIOS, sampleRate: this.sampleRate, userAgent: navigator.userAgent, webAudioSupport: !!(window.AudioContext || (window as any).webkitAudioContext), mediaDevicesSupport: !!navigator.mediaDevices });
+    console.log('AudioRecorder initialized:', { 
+      isSafari: this.isSafari, 
+      isIOS: this.isIOS,
+      sampleRate: this.sampleRate,
+      userAgent: navigator.userAgent,
+      webAudioSupport: !!(window.AudioContext || (window as any).webkitAudioContext),
+      mediaDevicesSupport: !!navigator.mediaDevices
+    });
   }
 
   async start() {
     if (!navigator.mediaDevices?.getUserMedia) {
-      console.error('MediaDevices API not available:', { mediaDevices: !!navigator.mediaDevices, getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) });
+      console.error('MediaDevices API not available:', { 
+        mediaDevices: !!navigator.mediaDevices,
+        getUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
+      });
       throw new Error("Could not request user media");
     }
 
-    console.log('Starting AudioRecorder with full environment info:', { userAgent: navigator.userAgent, platform: navigator.platform, vendor: navigator.vendor, audioWorkletSupport: !!(window.AudioWorklet), sampleRate: this.sampleRate, existingAudioContext: !!this.audioContext, existingStream: !!this.stream, isSafari: this.isSafari });
+    console.log('Starting AudioRecorder with full environment info:', {
+      userAgent: navigator.userAgent,
+      platform: navigator.platform,
+      vendor: navigator.vendor,
+      audioWorkletSupport: !!(window.AudioWorklet),
+      sampleRate: this.sampleRate,
+      existingAudioContext: !!this.audioContext,
+      existingStream: !!this.stream,
+      isSafari: this.isSafari
+    });
 
     this.starting = new Promise(async (resolve, reject) => {
       try {
-        const constraints = {
+        if (this.isSafari) {
+          // Safari implementation
+          console.log('Safari detected - using Safari-specific audio initialization');
+          
+          // 1. First get audio permissions
+          console.log('Requesting audio permissions first for Safari...');
+          const constraints = {
             audio: {
-              echoCancellation: !this.isSafari, // Safari handles this differently
-              noiseSuppression: !this.isSafari,
-              autoGainControl: !this.isSafari,
+              echoCancellation: false,
+              noiseSuppression: false,
+              autoGainControl: false,
               sampleRate: this.sampleRate,
               channelCount: 1
             }
-        };
-        console.log('Using audio constraints:', constraints);
-
-        // 1. Get User Media
-        try {
+          };
+          console.log('Safari audio constraints:', constraints);
+          
+          try {
             this.stream = await navigator.mediaDevices.getUserMedia(constraints);
             const track = this.stream.getAudioTracks()[0];
-            console.log('Audio permissions granted:', { track: track.label, settings: track.getSettings() });
-        } catch (err) {
-            console.error('Failed to get audio permissions:', err);
+            console.log('Safari audio permissions granted:', {
+              track: track.label,
+              settings: track.getSettings(),
+              constraints: track.getConstraints(),
+              enabled: track.enabled,
+              muted: track.muted,
+              readyState: track.readyState
+            });
+          } catch (err) {
+            console.error('Failed to get Safari audio permissions:', err);
             throw err;
-        }
+          }
 
-        // 2. Create Audio Context
-        try {
-            this.audioContext = this.isSafari 
-                ? await createSafariAudioContext(this.sampleRate) 
-                : await audioContext({ sampleRate: this.sampleRate });
-            console.log('Audio context ready:', { state: this.audioContext.state, sampleRate: this.audioContext.sampleRate });
-        } catch (err) {
-            console.error('Failed to initialize audio context:', err);
+          // 2. Create and initialize audio context
+          try {
+            this.audioContext = await createSafariAudioContext(this.sampleRate);
+            console.log('Safari audio context ready:', {
+              state: this.audioContext.state,
+              currentTime: this.audioContext.currentTime
+            });
+          } catch (err) {
+            console.error('Failed to initialize Safari audio context:', err);
             throw err;
-        }
+          }
 
-        // 3. Create Audio Source
-        try {
+          // 3. Create and connect audio source
+          try {
+            console.log('Creating Safari audio source...');
             this.source = this.audioContext.createMediaStreamSource(this.stream);
-            console.log('Audio source created.');
-        } catch (err) {
-            console.error('Failed to create audio source:', err);
+            console.log('Safari audio source created successfully:', {
+              numberOfInputs: this.source.numberOfInputs,
+              numberOfOutputs: this.source.numberOfOutputs,
+              channelCount: this.source.channelCount
+            });
+          } catch (err) {
+            console.error('Failed to create Safari audio source:', err);
             throw err;
-        }
+          }
 
-        // 4. Load and Create Worklets (Recording and VU Meter for ALL browsers)
-        try {
+          // 4. Load and create worklets
+          try {
             const recordingWorkletName = "audio-recorder-worklet";
-            const recordingWorkletSrc = createWorketFromSrc(recordingWorkletName, this.isSafari ? SafariAudioRecordingWorklet : AudioRecordingWorklet);
-            await this.audioContext.audioWorklet.addModule(recordingWorkletSrc);
-            console.log('Recording worklet module loaded.');
+            const vuWorkletName = "vu-meter";
+
+            console.log('Loading Safari audio worklets...');
+            await Promise.all([
+                this.audioContext.audioWorklet.addModule(createWorketFromSrc(recordingWorkletName, SafariAudioRecordingWorklet)),
+                this.audioContext.audioWorklet.addModule(createWorketFromSrc(vuWorkletName, VolMeterWorket))
+            ]);
+            console.log('Safari audio worklet modules loaded');
 
+            // Create Recording Worklet
             this.recordingWorklet = new AudioWorkletNode(this.audioContext, recordingWorkletName, { processorOptions: { sampleRate: this.sampleRate } });
-            
+            this.recordingWorklet.onprocessorerror = (event) => console.error('Safari AudioWorklet processor error:', event);
+            this.recordingWorklet.port.onmessageerror = (event) => console.error('Safari AudioWorklet message error:', event);
             this.recordingWorklet.port.onmessage = (ev: MessageEvent) => {
-              const arrayBuffer = ev.data.data?.int16arrayBuffer;
-              if (arrayBuffer) {
-                // *** تغییر اصلی: حالا data و volume را با هم می‌فرستیم ***
-                // توجه: در worklet ها محاسبه حجم صدا را اضافه خواهیم کرد
-                const arrayBufferString = arrayBufferToBase64(arrayBuffer);
-                // ما به جای رویداد مجزا، حجم را همراه با داده‌ها می‌فرستیم
-                // این کار را در ControlTray.tsx مدیریت خواهیم کرد
-                // this.emit("data", arrayBufferString); 
-              } else {
-                console.warn('Invalid audio chunk received:', ev.data);
+              const data = ev.data.data;
+              if (data?.int16arrayBuffer) {
+                // --- رویداد دیتا برای ارسال به سرور ---
+                this.emit("data", arrayBufferToBase64(data.int16arrayBuffer));
               }
             };
-            this.recordingWorklet.onprocessorerror = (event) => console.error('AudioWorklet processor error:', event);
-            console.log('Recording worklet node created.');
-            
-            // --- 👇 بخش حیاتی: افزودن VU Meter برای همه مرورگرها 👇 ---
-            const vuWorkletName = "vu-meter";
-            await this.audioContext.audioWorklet.addModule(createWorketFromSrc(vuWorkletName, VolMeterWorket));
-            this.vuWorklet = new AudioWorkletNode(this.audioContext, vuWorkletName);
+            console.log('Safari Recording WorkletNode created successfully');
 
-            // *** تغییر اصلی: رویداد data را با حجم صدا ترکیب می‌کنیم ***
+            // --- 👇 تغییر اصلی اینجاست: اضافه کردن VU Meter برای سافاری 👇 ---
+            this.vuWorklet = new AudioWorkletNode(this.audioContext, vuWorkletName);
             this.vuWorklet.port.onmessage = (ev: MessageEvent) => {
-                if (ev.data.volume && this.recordingWorklet) {
-                    // حالا هم داده خام صدا و هم حجم صدا را داریم
-                    // یک پیام به worklet ضبط می‌فرستیم تا داده‌های بافر شده را بگیریم
-                    this.recordingWorklet.port.postMessage({ getBuffer: true });
+                if (ev.data.volume) {
+                    // --- رویداد حجم صدا برای انیمیشن ---
+                    this.emit("data", '', ev.data.volume); 
                 }
             };
+            console.log('Safari VU Meter WorkletNode created successfully');
+            // --- 👆 پایان تغییرات اصلی 👆 ---
+
+          } catch (err) {
+            console.error('Failed to setup Safari audio worklets:', err);
+            throw err;
+          }
+
+          // 5. Connect nodes
+          try {
+            console.log('Connecting Safari audio nodes...');
+            this.source.connect(this.recordingWorklet);
+            this.source.connect(this.vuWorklet); // <-- اتصال VU meter به سورس
+            console.log('Safari audio nodes connected successfully');
+          } catch (err) {
+            console.error('Failed to connect Safari audio nodes:', err);
+            throw err;
+          }
+
+        } else {
+          // Chrome/other browsers implementation
+          console.log('Non-Safari browser detected - using standard audio initialization');
+          
+          const constraints = { audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, sampleRate: this.sampleRate } };
+          console.log('Chrome audio constraints:', constraints);
+          
+          try {
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            const track = this.stream.getAudioTracks()[0];
+            console.log('Chrome audio permissions granted:', { track: track.label, settings: track.getSettings() });
+          } catch (err) {
+            console.error('Failed to get Chrome audio permissions:', err);
+            throw err;
+          }
+          
+          try {
+            this.audioContext = await audioContext({ sampleRate: this.sampleRate });
+            console.log('Chrome audio context created:', { state: this.audioContext.state, sampleRate: this.audioContext.sampleRate });
+          } catch (err) {
+            console.error('Failed to create Chrome audio context:', err);
+            throw err;
+          }
+
+          try {
+            this.source = this.audioContext.createMediaStreamSource(this.stream);
+            console.log('Chrome audio source created');
+          } catch (err) {
+            console.error('Failed to create Chrome audio source:', err);
+            throw err;
+          }
+
+          try {
+            const recordingWorkletName = "audio-recorder-worklet";
+            const vuWorkletName = "vu-meter";
+
+            await Promise.all([
+                this.audioContext.audioWorklet.addModule(createWorketFromSrc(recordingWorkletName, AudioRecordingWorklet)),
+                this.audioContext.audioWorklet.addModule(createWorketFromSrc(vuWorkletName, VolMeterWorket))
+            ]);
+            console.log('Chrome audio worklets loaded');
+
+            this.recordingWorklet = new AudioWorkletNode(this.audioContext, recordingWorkletName, { processorOptions: { sampleRate: this.sampleRate } });
+            this.recordingWorklet.onprocessorerror = (event) => console.error('Chrome AudioWorklet processor error:', event);
+            this.recordingWorklet.port.onmessageerror = (event) => console.error('Chrome AudioWorklet message error:', event);
             
-            // دریافت پاسخ از worklet ضبط و ارسال نهایی
-            this.recordingWorklet.port.onmessage = (ev: MessageEvent) => {
-                const arrayBuffer = ev.data.buffer;
-                const volume = ev.data.volume; // فرض می‌کنیم worklet حجم را هم برمی‌گرداند
-                
-                if (arrayBuffer && typeof volume !== 'undefined') {
-                    const arrayBufferString = arrayBufferToBase64(arrayBuffer);
-                    // *** حالا هر دو مقدار را با هم emit می‌کنیم ***
-                    this.emit("data", arrayBufferString, volume);
-                }
-            };
+            this.vuWorklet = new AudioWorkletNode(this.audioContext, vuWorkletName);
             
-            console.log('VU meter worklet created and configured.');
+            // یک onmessage handler برای هر دو رویداد
+            let lastBase64 = '';
+            let lastVolume = 0;
 
-        } catch (err) {
-            console.error('Failed to setup audio worklets:', err);
-            throw err;
-        }
+            const handleMessage = () => {
+                this.emit("data", lastBase64, lastVolume);
+            }
+
+            this.recordingWorklet.port.onmessage = async (ev: MessageEvent) => {
+              const arrayBuffer = ev.data.data?.int16arrayBuffer;
+              if (arrayBuffer) {
+                lastBase64 = arrayBufferToBase64(arrayBuffer);
+                handleMessage();
+              }
+            };
+            
+            this.vuWorklet.port.onmessage = (ev: MessageEvent) => {
+              if (ev.data.volume !== undefined) {
+                lastVolume = ev.data.volume;
+                handleMessage();
+              }
+            };
+            
+            console.log('Chrome AudioWorkletNodes created');
 
-        // 5. Connect Nodes
-        try {
             this.source.connect(this.recordingWorklet);
-            this.source.connect(this.vuWorklet); // اتصال VU متر به منبع
-            console.log('Audio nodes connected successfully.');
-        } catch (err) {
-            console.error('Failed to connect audio nodes:', err);
+            this.source.connect(this.vuWorklet);
+            console.log('Chrome audio nodes connected');
+
+          } catch (err) {
+            console.error('Failed to setup/connect Chrome audio nodes:', err);
             throw err;
+          }
         }
-        
+
         this.recording = true;
         console.log('Recording started successfully');
         resolve();
         this.starting = null;
-
       } catch (error) {
         console.error('Failed to start recording:', error);
         this.stop();
@@ -195,10 +314,10 @@ export class AudioRecorder extends EventEmitter {
     console.log('Stopping audio recorder...');
     const handleStop = () => {
       try {
+        this.recording = false;
         if (this.source) {
           console.log('Disconnecting audio source...');
           this.source.disconnect();
-          this.source = undefined;
         }
         if (this.stream) {
           console.log('Stopping media stream tracks...');
@@ -206,32 +325,27 @@ export class AudioRecorder extends EventEmitter {
             track.stop();
             console.log('Stopped track:', track.label);
           });
-          this.stream = undefined;
         }
-        // بستن audioContext فقط در سافاری و در صورت نیاز
-        if (this.audioContext && this.isSafari && this.audioContext.state !== 'closed') {
-          console.log('Closing Safari audio context...');
+        if (this.audioContext && (this.audioContext.state === 'running' || this.isSafari)) {
+          console.log('Closing audio context...');
           this.audioContext.close();
-          this.audioContext = undefined;
         }
-        
+        this.stream = undefined;
         this.recordingWorklet = undefined;
         this.vuWorklet = undefined;
-        this.recording = false;
+        this.source = undefined;
+        this.audioContext = undefined;
         this.emit("stop");
         console.log('Audio recorder stopped successfully');
       } catch (err) {
         console.error('Error while stopping audio recorder:', err);
       }
     };
-
     if (this.starting) {
       console.log('Stop called while starting - waiting for start to complete...');
-      this.starting.then(handleStop).catch(handleStop);
-      this.starting = null;
+      this.starting.then(handleStop);
       return;
     }
-    
     handleStop();
   }
 }