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,31 @@ export default defineComponent({
 
     console.debug(`[AUDIOAREA] Initializing ${props.definition.src}...`);
     console.debug(props.definition);
-    
+
     // 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 audioSrc to empty initially
-        if (!response.ok) throw new Error(`Failed to load audio: ${response.statusText}`);
+      audioSrc.value = "";
-        
+
-        // Convert to blob to ensure full download
+      // Queue the audio for loading through our global service
-        const blob = await response.blob();
+      // Our improved AudioLoader will cache and deduplicate requests
-        
+      queueAudioForLoading(src)
-        // Create a blob URL to use as the audio source
+        .then((blobUrl) => {
-        const blobUrl = URL.createObjectURL(blob);
+          // Use blob URL to avoid keeping connections open
-        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) {
+        })
-        console.error(`[AUDIOAREA] Error preloading audio: ${error}`);
+        .catch((error) => {
-        // Fall back to original source if preloading fails
+          console.error(`[AUDIOAREA] Error preloading audio: ${error}`);
-        audioSrc.value = src;
+          // Fall back to original source if preloading fails
-      }
+          audioSrc.value = src;
+        });
     };
-    
+
     // Start preloading when component is created
     preloadAudio(props.definition.src);
 
@@ -58,6 +60,8 @@ export default defineComponent({
     const vol_b = 1 - vol_x;
 
     const onBBoxChange = () => {
+      if (!audioSrc.value) return;
+
       const x = props.bbox.x + props.bbox.w / 2;
       const y = props.bbox.y + props.bbox.h / 2;
       const distance = Math.sqrt(
@@ -104,5 +108,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,170 @@
+/**
+ * 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;
+}> = [];
+
+// Cache of loaded audio files (src -> blobUrl)
+const loadedAudioCache: Record<string, string> = {};
+
+// Keep track of pending loads to avoid duplicates
+const pendingLoads: Set<string> = new Set();
+
+/**
+ * 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 cached result immediately if available
+  if (loadedAudioCache[src]) {
+    console.debug(`[AudioLoader] Using cached audio for ${src}`);
+    const blobUrl = loadedAudioCache[src];
+    if (onComplete) setTimeout(() => onComplete(blobUrl), 0);
+    return Promise.resolve(blobUrl);
+  }
+  
+  // If this source is already being loaded, add to existing promises
+  if (pendingLoads.has(src)) {
+    console.debug(`[AudioLoader] Already loading ${src}, adding to pending requests`);
+    return new Promise((resolve, reject) => {
+      audioQueue.push({
+        src,
+        onComplete: (blobUrl) => {
+          if (onComplete) onComplete(blobUrl);
+          resolve(blobUrl);
+        },
+        onError: (error) => {
+          if (onError) onError(error);
+          reject(error);
+        }
+      });
+    });
+  }
+  
+  // Mark as pending
+  pendingLoads.add(src);
+  
+  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() {
+  // Group queue items by src to avoid duplicate loads
+  const nextBatch: Record<string, Array<{
+    onComplete: (blobUrl: string) => void;
+    onError: (error: Error) => void;
+  }>> = {};
+
+  // Find next items to process while respecting MAX_CONCURRENT_LOADS
+  while (activeLoads < MAX_CONCURRENT_LOADS && audioQueue.length > 0) {
+    const next = audioQueue.shift();
+    if (!next) continue;
+    
+    // If already cached, complete immediately without consuming a slot
+    if (loadedAudioCache[next.src]) {
+      next.onComplete(loadedAudioCache[next.src]);
+      continue;
+    }
+    
+    // Group by src
+    if (!nextBatch[next.src]) {
+      nextBatch[next.src] = [];
+      // Each unique src counts as one active load
+      activeLoads++;
+    }
+    
+    nextBatch[next.src].push({
+      onComplete: next.onComplete,
+      onError: next.onError
+    });
+  }
+  
+  // Start loading each unique audio file
+  Object.entries(nextBatch).forEach(([src, handlers]) => {
+    loadAudio(src, handlers);
+  });
+}
+
+/**
+ * Internal function to handle the actual audio loading using fetch API
+ * This ensures the entire audio file is downloaded
+ * @param src The source URL to load
+ * @param handlers Array of handlers to call when loading completes or fails
+ */
+async function loadAudio(
+  src: string,
+  handlers: Array<{
+    onComplete: (blobUrl: string) => void;
+    onError: (error: Error) => void;
+  }>
+) {
+  console.debug(`[AudioLoader] Loading ${src} (${handlers.length} listeners)`);
+  
+  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);
+    
+    // Store in cache
+    loadedAudioCache[src] = blobUrl;
+    
+    console.debug(`[AudioLoader] Successfully loaded ${src}`);
+    
+    // Call all completion handlers
+    handlers.forEach(handler => handler.onComplete(blobUrl));
+  } catch (error) {
+    console.error(`[AudioLoader] Error loading audio: ${error}`);
+    
+    // Call all error handlers
+    handlers.forEach(handler => handler.onError(error as Error));
+  } finally {
+    // Remove from pending loads
+    pendingLoads.delete(src);
+    
+    // Decrement counter when audio is loaded (or failed)
+    activeLoads--;
+    
+    // Process next audio in queue if available
+    processQueue();
+  }
+}