feat: implement global audio loading queue to prevent concurrent connection limits

src/components/AudioArea.vue

@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from "vue";
 import { BoundingBox } from "@/components/SVGContent.vue";
+import { queueAudioForLoading } from "@/services/AudioLoader";
 
 export default defineComponent({
   name: "AudioArea",
@@ -25,30 +26,34 @@ export default defineComponent({
 
     console.debug(`[AUDIOAREA] Initializing ${props.definition.src}...`);
     console.debug(props.definition);
+
+    // Silent 1ms audio as placeholder (data URI of a minimal silent MP3)
+    // This prevents browser from attempting to load any audio until we're ready
+    const SILENT_AUDIO = 'data:audio/mp3;base64,SUQzAwAAAAAAJlRJVDIAAAAHAAAAU2lsZW50/+MYxAAEaAIAAgAAAAkBngQAAABMQVJHAAAABQAA/+MYxA8EaAIAAgAAABAAAP/7kMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/4xjEMgAAAAACAAAAAAAAAP/jGMRFAAAAAAAAAAAAAAAAAAAA';
     
     // Preload the audio file completely to avoid keeping connections open
-    const preloadAudio = async (src: string) => {
+    // Use the global audio loading queue to throttle concurrent loads
-      console.debug(`[AUDIOAREA] Preloading audio: ${src}`);
+    const preloadAudio = (src: string) => {
-      try {
+      console.debug(`[AUDIOAREA] Queueing audio for preload: ${src}`);
-        // Fetch the entire audio file
+
-        const response = await fetch(src);
+      // Set placeholder silent audio to avoid errors without triggering real load
-        if (!response.ok) throw new Error(`Failed to load audio: ${response.statusText}`);
+      audioSrc.value = SILENT_AUDIO;
-        
+
-        // Convert to blob to ensure full download
+      // Queue the audio for loading through our global service
-        const blob = await response.blob();
+      queueAudioForLoading(src)
-        
+        .then((blobUrl) => {
-        // Create a blob URL to use as the audio source
+          // Use blob URL to avoid keeping connections open
-        const blobUrl = URL.createObjectURL(blob);
+          audioSrc.value = blobUrl;
-        audioSrc.value = blobUrl;
+          isPreloaded.value = true;
-        isPreloaded.value = true;
+          console.debug(`[AUDIOAREA] Successfully preloaded audio: ${src}`);
-        console.debug(`[AUDIOAREA] Successfully preloaded audio: ${src}`);
+        })
-      } catch (error) {
+        .catch((error) => {
-        console.error(`[AUDIOAREA] Error preloading audio: ${error}`);
+          console.error(`[AUDIOAREA] Error preloading audio: ${error}`);
-        // Fall back to original source if preloading fails
+          // Fall back to original source if preloading fails
-        audioSrc.value = src;
+          audioSrc.value = src;
-      }
+        });
     };
-    
+
     // Start preloading when component is created
     preloadAudio(props.definition.src);
 
@@ -104,5 +109,4 @@ export interface AudioAreaDef {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped></style>
-</style>

src/services/AudioLoader.ts

@@ -0,0 +1,101 @@
+/**
+ * Global audio loading queue service to prevent hitting browser connection limits
+ */
+
+// Configuration
+const MAX_CONCURRENT_LOADS = 3;
+
+// State
+let activeLoads = 0;
+const audioQueue: Array<{
+  src: string;
+  onComplete: (blobUrl: string) => void;
+  onError: (error: Error) => void;
+}> = [];
+
+/**
+ * Queue an audio file for loading, respecting the global concurrent loading limit
+ * Returns a promise that resolves with the blob URL when loading is complete
+ */
+export function queueAudioForLoading(
+  src: string,
+  onComplete?: (blobUrl: string) => void,
+  onError?: (error: Error) => void
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    // Add to queue
+    audioQueue.push({
+      src,
+      onComplete: (blobUrl) => {
+        if (onComplete) onComplete(blobUrl);
+        resolve(blobUrl);
+      },
+      onError: (error) => {
+        if (onError) onError(error);
+        reject(error);
+      }
+    });
+
+    // Try to process queue
+    processQueue();
+  });
+}
+
+/**
+ * Process the next items in the queue if we have capacity
+ */
+function processQueue() {
+  // Load more audio files if we have capacity and items in the queue
+  while (activeLoads < MAX_CONCURRENT_LOADS && audioQueue.length > 0) {
+    const next = audioQueue.shift();
+    if (next) {
+      loadAudio(next.src, next.onComplete, next.onError);
+    }
+  }
+}
+
+/**
+ * Internal function to handle the actual audio loading using fetch API
+ * This ensures the entire audio file is downloaded
+ */
+async function loadAudio(
+  src: string,
+  onComplete: (blobUrl: string) => void,
+  onError: (error: Error) => void
+) {
+  // Increment active loads counter
+  activeLoads++;
+
+  console.debug(`[AudioLoader] Loading ${src}`);
+  
+  try {
+    // Fetch the entire audio file
+    const response = await fetch(src);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to load audio: ${response.statusText}`);
+    }
+    
+    // Convert to blob to ensure full download
+    const blob = await response.blob();
+    
+    // Create a blob URL to use as the audio source
+    const blobUrl = URL.createObjectURL(blob);
+    
+    console.debug(`[AudioLoader] Successfully loaded ${src}`);
+    
+    // Call completion handler
+    onComplete(blobUrl);
+  } catch (error) {
+    console.error(`[AudioLoader] Error loading audio: ${error}`);
+    
+    // Call error handler
+    onError(error as Error);
+  } finally {
+    // Decrement counter when audio is loaded (or failed)
+    activeLoads--;
+    
+    // Process next audio in queue if available
+    processQueue();
+  }
+}