Merge pull request #221 from Chuui9739/fix-MediaSource-error

Repair the error 'Error: Error generating speech: Failed to execute '…

Author: fireblade2534

web/src/services/AudioService.js

@@ -264,19 +264,46 @@ export class AudioService {
 
         // Don't process if audio is in error state
         if (this.audio.error) {
-            console.warn('Skipping operation due to audio error');
+            console.warn("Skipping operation due to audio error");
             return;
         }
 
         const operation = this.pendingOperations.shift();
-        
+
         try {
             this.sourceBuffer.appendBuffer(operation.chunk);
-            operation.resolve();
+
+            // Set up event listeners
+            const onUpdateEnd = () => {
+                operation.resolve();
+                this.sourceBuffer.removeEventListener("updateend", onUpdateEnd);
+                this.sourceBuffer.removeEventListener(
+                    "updateerror",
+                    onUpdateError
+                );
+                // Process the next operation
+                this.processNextOperation();
+            };
+
+            const onUpdateError = (event) => {
+                operation.reject(event);
+                this.sourceBuffer.removeEventListener("updateend", onUpdateEnd);
+                this.sourceBuffer.removeEventListener(
+                    "updateerror",
+                    onUpdateError
+                );
+                // Decide whether to continue processing
+                if (event.name !== "InvalidStateError") {
+                    this.processNextOperation();
+                }
+            };
+
+            this.sourceBuffer.addEventListener("updateend", onUpdateEnd);
+            this.sourceBuffer.addEventListener("updateerror", onUpdateError);
         } catch (error) {
             operation.reject(error);
             // Only continue processing if it's not a fatal error
-            if (error.name !== 'InvalidStateError') {
+            if (error.name !== "InvalidStateError") {
                 this.processNextOperation();
             }
         }
@@ -364,14 +391,14 @@ export class AudioService {
             this.controller.abort();
             this.controller = null;
         }
-        
+
         if (this.audio) {
             this.audio.pause();
-            this.audio.src = '';
+            this.audio.src = "";
             this.audio = null;
         }
 
-        if (this.mediaSource && this.mediaSource.readyState === 'open') {
+        if (this.mediaSource && this.mediaSource.readyState === "open") {
             try {
                 this.mediaSource.endOfStream();
             } catch (e) {
@@ -380,25 +407,29 @@ export class AudioService {
         }
 
         this.mediaSource = null;
-        this.sourceBuffer = null;
+        if (this.sourceBuffer) {
+            this.sourceBuffer.removeEventListener("updateend", () => {});
+            this.sourceBuffer.removeEventListener("updateerror", () => {});
+            this.sourceBuffer = null;
+        }
         this.serverDownloadPath = null;
         this.pendingOperations = [];
     }
 
     cleanup() {
         if (this.audio) {
             this.eventListeners.forEach((listeners, event) => {
-                listeners.forEach(callback => {
+                listeners.forEach((callback) => {
                     this.audio.removeEventListener(event, callback);
                 });
             });
-            
+
             this.audio.pause();
-            this.audio.src = '';
+            this.audio.src = "";
             this.audio = null;
         }
 
-        if (this.mediaSource && this.mediaSource.readyState === 'open') {
+        if (this.mediaSource && this.mediaSource.readyState === "open") {
             try {
                 this.mediaSource.endOfStream();
             } catch (e) {
@@ -407,7 +438,11 @@ export class AudioService {
         }
 
         this.mediaSource = null;
-        this.sourceBuffer = null;
+        if (this.sourceBuffer) {
+            this.sourceBuffer.removeEventListener("updateend", () => {});
+            this.sourceBuffer.removeEventListener("updateerror", () => {});
+            this.sourceBuffer = null;
+        }
         this.serverDownloadPath = null;
         this.pendingOperations = [];
     }