background tweaks, CPU spike fix

index.html

@@ -49,7 +49,7 @@
             background-position: center;
             background-repeat: repeat;
             pointer-events: none;
-            opacity: 0.33;
+            opacity: 0.20;
             mix-blend-mode: normal;
         }
 
@@ -258,19 +258,6 @@
         }
         */
 
-        .cassette::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-image: 
-                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="grime"><feTurbulence type="fractalNoise" baseFrequency="3" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23grime)" opacity="0.15"/></svg>');
-            pointer-events: none;
-            border-radius: 4px;
-            mix-blend-mode: multiply;
-        }
 
         .cassette-label {
             background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 100%);
@@ -690,20 +677,6 @@
             pointer-events: auto;
         }
 
-        /* Noise texture overlay for worn appearance */
-        .alby-panel::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-image: 
-                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="2.5" numOctaves="6" /></filter><rect width="200" height="200" filter="url(%23noise)" opacity="0.4"/></svg>');
-            pointer-events: none;
-            opacity: 0.5;
-            mix-blend-mode: overlay;
-        }
 
         /* Panel header with amber Lightning accent */
         .alby-panel-header {
@@ -1201,7 +1174,7 @@
     
     <!-- ALBY LIGHTNING PANEL - END -->
 
-    <audio id="audio"></audio>
+    <audio id="audio" preload="metadata"></audio>
 
     <script>
         const playlist = [
@@ -1256,9 +1229,29 @@
             
             for (let i = 0; i < playlist.length; i++) {
                 try {
-                    const duration = await getTrackDuration(playlist[i].url);
+                    // For track 0, use the main audio element since loadTrack(0) already loads it
-                    trackDurations[i] = duration;
+                    if (i === 0 && currentTrack === 0) {
-                    console.log(`Track ${i + 1} duration: ${formatTime(duration)}`);
+                        // Wait for main audio to load metadata if not already
+                        if (audio.duration && !isNaN(audio.duration)) {
+                            trackDurations[i] = audio.duration;
+                        } else {
+                            // Wait for main audio metadata
+                            trackDurations[i] = await new Promise((resolve) => {
+                                if (audio.duration && !isNaN(audio.duration)) {
+                                    resolve(audio.duration);
+                                } else {
+                                    audio.addEventListener('loadedmetadata', function onMeta() {
+                                        audio.removeEventListener('loadedmetadata', onMeta);
+                                        resolve(audio.duration);
+                                    });
+                                }
+                            });
+                        }
+                    } else {
+                        // For other tracks, use temp audio element
+                        trackDurations[i] = await getTrackDuration(playlist[i].url);
+                    }
+                    console.log(`Track ${i + 1} duration: ${formatTime(trackDurations[i])}`);
                 } catch (e) {
                     console.warn(`Failed to get duration for track ${i + 1}, using fallback`);
                     trackDurations[i] = 240; // 4 minute fallback
@@ -1292,24 +1285,35 @@
                 const tempAudio = new Audio();
                 tempAudio.preload = 'metadata'; // Only fetch headers, not entire file
                 
+                // Cleanup function to properly abort any ongoing request
+                function cleanup() {
+                    tempAudio.removeEventListener('loadedmetadata', onMetadata);
+                    tempAudio.removeEventListener('error', onError);
+                    tempAudio.src = '';
+                    tempAudio.load(); // Force abort of any pending request
+                }
+                
                 // Set timeout for slow loads
                 const timeout = setTimeout(() => {
-                    tempAudio.src = '';
+                    cleanup();
                     reject(new Error('Timeout loading metadata'));
                 }, 10000); // 10 second timeout
                 
-                tempAudio.addEventListener('loadedmetadata', () => {
+                function onMetadata() {
                     clearTimeout(timeout);
                     const duration = tempAudio.duration;
-                    tempAudio.src = ''; // Clean up
+                    cleanup();
                     resolve(duration);
-                });
+                }
                 
-                tempAudio.addEventListener('error', (e) => {
+                function onError(e) {
                     clearTimeout(timeout);
-                    tempAudio.src = '';
+                    cleanup();
                     reject(e);
-                });
+                }
+                
+                tempAudio.addEventListener('loadedmetadata', onMetadata);
+                tempAudio.addEventListener('error', onError);
                 
                 // Direct URL - browser handles caching via HTTP headers
                 tempAudio.src = url;