src/components/AudioArea.vue

@@ -27,16 +27,19 @@ 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
     // Use the global audio loading queue to throttle concurrent loads
     const preloadAudio = (src: string) => {
       console.debug(`[AUDIOAREA] Queueing audio for preload: ${src}`);
 
-      // Set audioSrc to empty initially
+      // Set placeholder silent audio to avoid errors without triggering real load
-      audioSrc.value = "";
+      audioSrc.value = SILENT_AUDIO;
 
       // Queue the audio for loading through our global service
-      // Our improved AudioLoader will cache and deduplicate requests
       queueAudioForLoading(src)
         .then((blobUrl) => {
           // Use blob URL to avoid keeping connections open
@@ -60,8 +63,6 @@ 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(

src/services/AudioLoader.ts

@@ -13,12 +13,6 @@ const audioQueue: Array<{
   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
@@ -28,35 +22,6 @@ export function queueAudioForLoading(
   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({
@@ -80,56 +45,28 @@ export function queueAudioForLoading(
  * Process the next items in the queue if we have capacity
  */
 function processQueue() {
-  // Group queue items by src to avoid duplicate loads
+  // Load more audio files if we have capacity and items in the queue
-  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 (next) {
-    
+      loadAudio(next.src, next.onComplete, next.onError);
-    // 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,
-    onComplete: (blobUrl: string) => void;
+  onError: (error: Error) => void
-    onError: (error: Error) => void;
-  }>
 ) {
-  console.debug(`[AudioLoader] Loading ${src} (${handlers.length} listeners)`);
+  // Increment active loads counter
+  activeLoads++;
+
+  console.debug(`[AudioLoader] Loading ${src}`);
   
   try {
     // Fetch the entire audio file
@@ -145,22 +82,16 @@ async function loadAudio(
     // 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
+    // Call completion handler
-    handlers.forEach(handler => handler.onComplete(blobUrl));
+    onComplete(blobUrl);
   } catch (error) {
     console.error(`[AudioLoader] Error loading audio: ${error}`);
     
-    // Call all error handlers
+    // Call error handler
-    handlers.forEach(handler => handler.onError(error as Error));
+    onError(error as Error);
   } finally {
-    // Remove from pending loads
-    pendingLoads.delete(src);
-    
     // Decrement counter when audio is loaded (or failed)
     activeLoads--;