Manual changes saved

script.js

@@ -1,9 +1,7 @@
-// Simple MySpace-style music player
-// Fresh reset – ignores any old visualizer code
-
+// Simple MySpace-style music player with fake EQ bars
 
+document.addEventListener("DOMContentLoaded", () => {
   // === PLAYLIST ===
-  // You can add more songs later if you want.
   const playlist = [
     {
       title: "The Ocean",
@@ -20,24 +18,48 @@
   const prevBtn = document.getElementById("prev-btn");
   const nextBtn = document.getElementById("next-btn");
   const seekBar = document.getElementById("seek-bar");
-
-  // If something is missing, bail out quietly
-  //if (
-  //!audioEl ||
-  //!titleEl ||
-  //!artistEl ||
-  //!playPauseBtn ||
-  //!prevBtn ||
-  //!nextBtn ||
-  //!seekBar
-  //) {
-  //  console.warn("Music player: required elements not found.");
-  //  return;
-  //}
+  const eqBars = document.querySelectorAll(".eq-visualizer .eq-bar");
+
+  // Safety check – if something's missing, don't crash
+  if (
+    !audioEl ||
+    !titleEl ||
+    !artistEl ||
+    !playPauseBtn ||
+    !prevBtn ||
+    !nextBtn ||
+    !seekBar
+  ) {
+    console.warn("Music player: required elements not found.");
+    return;
+  }
 
   let currentTrackIndex = 0;
   let isPlaying = false;
   let isSeeking = false;
+  let eqInterval = null;
+
+  // === EQ BAR ANIMATION (FAKE VISUALIZER) ===
+
+  function startEq() {
+    if (!eqBars.length || eqInterval) return;
+    eqInterval = setInterval(() => {
+      eqBars.forEach((bar) => {
+        const height = 20 + Math.random() * 80; // 20%–100%
+        bar.style.height = `${height}%`;
+      });
+    }, 120);
+  }
+
+  function stopEq() {
+    if (eqInterval) {
+      clearInterval(eqInterval);
+      eqInterval = null;
+    }
+    eqBars.forEach((bar) => {
+      bar.style.height = "25%"; // idle height
+    });
+  }
 
   // === CORE FUNCTIONS ===
 
@@ -51,21 +73,31 @@
   }
 
   function playTrack() {
-    audioEl
-      .play()
-      .then(() => {
-        isPlaying = true;
-        playPauseBtn.textContent = "⏸"; // pause icon
-      })
-      .catch((err) => {
-        console.warn("Autoplay/play blocked:", err);
-      });
+    if (!audioEl.src) {
+      // just in case loadTrack didn't run for some reason
+      loadTrack(currentTrackIndex);
+    }
+
+    const playPromise = audioEl.play();
+
+    if (playPromise !== undefined) {
+      playPromise
+        .then(() => {
+          isPlaying = true;
+          playPauseBtn.textContent = "⏸"; // pause icon
+          startEq();
+        })
+        .catch((err) => {
+          console.warn("Autoplay/play blocked or failed:", err);
+        });
+    }
   }
 
   function pauseTrack() {
     audioEl.pause();
     isPlaying = false;
     playPauseBtn.textContent = "▶"; // play icon
+    stopEq();
   }
 
   function togglePlay() {
@@ -92,18 +124,11 @@
   // === EVENT LISTENERS ===
 
   // Play / Pause button
-  playPauseBtn.addEventListener("click", () => {
-    togglePlay();
-  });
+  playPauseBtn.addEventListener("click", togglePlay);
 
   // Next / Previous
-  nextBtn.addEventListener("click", () => {
-    playNext();
-  });
-
-  prevBtn.addEventListener("click", () => {
-    playPrev();
-  });
+  nextBtn.addEventListener("click", playNext);
+  prevBtn.addEventListener("click", playPrev);
 
   // Keep seek bar in sync with audio
   audioEl.addEventListener("timeupdate", () => {
@@ -129,10 +154,16 @@
     playNext();
   });
 
+  // If there's an audio error (bad URL, etc.)
+  audioEl.addEventListener("error", (e) => {
+    console.warn("Audio element error:", e);
+  });
+
   // === INITIALIZE ===
 
   // Load first track
   loadTrack(currentTrackIndex);
 
-  // Try autoplay on load (browser may block this until user interacts)
+  // Try autoplay on load (browser may block this until user clicks)
   playTrack();
+});