Update index.html

index.html

@@ -1,521 +1,702 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import * as Tone from 'tone'; // Import Tone.js
-
-// Song data parsed from your previous responses
-const songsData = [
-  {
-    title: "Talkin' 'bout a Revolution",
-    artist: "Tracy Chapman",
-    sections: [
-      { type: "Intro", lines: [{ chords: "G         C         D         G", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "G           C           D             G", lyrics: "While outside a revolution's talking..." },
-        { chords: "G           C           D             G", lyrics: "It's gonna come, it's gonna come..." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution, oh, no" },
-        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution..." }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "G           C           D             G", lyrics: "While outside a revolution's talking..." },
-        { chords: "G           C           D             G", lyrics: "It's gonna come, it's gonna come..." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution, oh, no" },
-        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution..." }
-      ]},
-      { type: "Outro", lines: [{ chords: "G         C         D         G", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Fast Car",
-    artist: "Tracy Chapman",
-    sections: [
-      { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "C                 G               Am               F", lyrics: "You got a fast car, I want a ticket to anywhere..." },
-        { chords: "C                 G               Am               F", lyrics: "We go driving in it, anywhere, maybe we'll make a deal..." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "C                 G               Am               F", lyrics: "So remember when we were driving, driving in your car..." },
-        { chords: "C                 G               Am               F", lyrics: "The speed of light, we gotta go, go, go, go, go..." }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "C                 G               Am               F", lyrics: "You got a fast car, I got a plan to get us out of here..." },
-        { chords: "C                 G               Am               F", lyrics: "I been working at the convenience store, so slow..." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "C                 G               Am               F", lyrics: "So remember when we were driving, driving in your car..." },
-        { chords: "C                 G               Am               F", lyrics: "The speed of light, we gotta go, go, go, go, go..." }
-      ]},
-      { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Cult of Personality",
-    artist: "Living Colour",
-    sections: [
-      { type: "Intro", lines: [{ chords: "Em        G         C         D", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "Em        G             C          D", lyrics: "Look in my eyes, what do you see?" },
-        { chords: "Em        G             C          D", lyrics: "The cult of personality." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "Em        G             C          D", lyrics: "Cult of Personality! Cult of Personality!" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "Em        G             C          D", lyrics: "I look in your eyes, what do I see?" },
-        { chords: "Em        G             C          D", lyrics: "The cult of personality." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "Em        G             C          D", lyrics: "Cult of Personality! Cult of Personality!" }
-      ]},
-      { type: "Outro", lines: [{ chords: "Em        G         C         D", lyrics: "(repeated, building to a final hit on Em)" }] }
-    ]
-  },
-  {
-    title: "Glamour Boys",
-    artist: "Living Colour",
-    sections: [
-      { type: "Intro", lines: [{ chords: "E         B         A         E", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "E               B", lyrics: "The Glamour Boys, they got the girls" },
-        { chords: "A               E", lyrics: "They got the cars, they got the pearls" }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "E                 B               A                  E", lyrics: "Glamour Boys, oh, the Glamour Boys, what makes you think you're so cool?" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "E               B", lyrics: "The Glamour Boys, they're so hip" },
-        { chords: "A               E", lyrics: "They got the style, they got the trip" }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "E                 B               A                  E", lyrics: "Glamour Boys, oh, the Glamour Boys, what makes you think you're so cool?" }
-      ]},
-      { type: "Outro", lines: [{ chords: "E         B         A         E", lyrics: "(repeat and fade with guitar licks)" }] }
-    ]
-  },
-  {
-    title: "Ocean Size",
-    artist: "Jane's Addiction",
-    sections: [
-      { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "C              G               Am                F", lyrics: "Day by day, as the weeks turn to months, I watch you..." },
-        { chords: "C              G               Am                F", lyrics: "Growing taller, growing wiser, growing stronger..." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "C        G          D          F", lyrics: "Ocean size, it's the ocean size" },
-        { chords: "C        G          D          F", lyrics: "The ocean size, it's the ocean size" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "C              G               Am                F", lyrics: "Day by day, as the weeks turn to months, I watch you..." },
-        { chords: "C              G               Am                F", lyrics: "Growing stronger, growing wiser, growing taller..." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "C        G          D          F", lyrics: "Ocean size, it's the ocean size" },
-        { chords: "C        G          D          F", lyrics: "The ocean size, it's the ocean size" }
-      ]},
-      { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Mountain Song",
-    artist: "Jane's Addiction",
-    sections: [
-      { type: "Intro", lines: [{ chords: "Em        C         G         D", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "Em            C               G              D", lyrics: "Coming down the mountain, I saw a girl" },
-        { chords: "Em            C               G              D", lyrics: "She was looking at me, in my world" }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "Em       C       G        D", lyrics: "Mountain Song! Mountain Song!" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "Em            C               G              D", lyrics: "She said, \"Where'd you come from? Where'd you go?\"" },
-        { chords: "Em            C               G              D", lyrics: "\"I came from the mountain, don't you know?\"" }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "Em       C       G        D", lyrics: "Mountain Song! Mountain Song!" }
-      ]},
-      { type: "Outro", lines: [{ chords: "Em        C         G         D", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Where Is My Mind?",
-    artist: "Pixies",
-    sections: [
-      { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "C               G               Am            F", lyrics: "With your feet on the air and your head on the ground..." },
-        { chords: "C               G               Am            F", lyrics: "Try this trick and spin it, yeah..." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "C               G               Am            F", lyrics: "Where is my mind? Where is my mind?" },
-        { chords: "C               G               Am            F", lyrics: "Where is my mind? Way out in the water, see it swimming..." }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "C               G               Am            F", lyrics: "I was thinking about you and the things we've done..." },
-        { chords: "C               G               Am            F", lyrics: "And all the places we've been to, oh yeah..." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "C               G               Am            F", lyrics: "Where is my mind? Where is my mind?" },
-        { chords: "C               G               Am            F", lyrics: "Where is my mind? Way out in the water, see it swimming..." }
-      ]},
-      { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Fisherman's Blues",
-    artist: "The Waterboys",
-    sections: [
-      { type: "Intro", lines: [{ chords: "G         C         D         G", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "G            C               D               G", lyrics: "I wish I was a fisherman, tumbling on the sea" },
-        { chords: "G            C               D               G", lyrics: "Far away from dry land, and its bitter misery" }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "G             C               D               G", lyrics: "I'm gonna make a record, a record of my dreams" },
-        { chords: "G             C               D               G", lyrics: "And let the wind and the waves sing along to the themes" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "G            C               D               G", lyrics: "I wish I was a fisherman, out on the rolling deep" },
-        { chords: "G            C               D               G", lyrics: "With nothing but the stars to guide me, while the city sleeps" }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "G             C               D               G", lyrics: "I'm gonna make a record, a record of my dreams" },
-        { chords: "G             C               D               G", lyrics: "And let the wind and the waves sing along to the themes" }
-      ]},
-      { type: "Outro", lines: [{ chords: "G         C         D         G", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "Express Yourself",
-    artist: "N.W.A.",
-    sections: [
-      { type: "Intro", lines: [{ chords: "F         Am        Dm        C", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "F               Am                Dm                 C", lyrics: "I'm expressing with my full capabilities, and now I'm living in reality..." },
-        { chords: "F               Am                Dm                 C", lyrics: "The only solution is to get involved and move it..." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! Express yourself!" },
-        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! It's a brand new thing..." }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "F               Am                Dm                 C", lyrics: "Now I'm the one, I'm the one, I'm the one that you know..." },
-        { chords: "F               Am                Dm                 C", lyrics: "Coming to get you, coming to get you, coming to get you, watch me go..." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! Express yourself!" },
-        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! It's a brand new thing..." }
-      ]},
-      { type: "Outro", lines: [{ chords: "F         Am        Dm        C", lyrics: "(repeat and fade)" }] }
-    ]
-  },
-  {
-    title: "One",
-    artist: "Metallica",
-    sections: [
-      { type: "Intro", lines: [{ chords: "Am        G         C         F", lyrics: "(Acoustic Intro/Verse Part)" }] },
-      { type: "Verse 1", lines: [
-        { chords: "Am             G             C              F", lyrics: "I can't remember anything, can't tell if this is true or dream..." },
-        { chords: "Am             G             C              F", lyrics: "Deep down inside I feel the scream..." }
-      ]},
-      { type: "Chorus 1", lines: [ // Note: This is not a traditional chorus for this song, but the repeated progression
-        { chords: "Am             G             C              F", lyrics: "Hold my breath as I wish for death..." }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "Am             G             C              F", lyrics: "Life it seems will fade away, drifting further every day..." },
-        { chords: "Am             G             C              F", lyrics: "Getting lost within myself, nothing matters, no one else..." }
-      ]},
-      { type: "Chorus 2", lines: [ // Note: This is not a traditional chorus for this song, but the repeated progression
-        { chords: "Am             G             C              F", lyrics: "All the thoughts that I have now..." }
-      ]},
-      { type: "Outro", lines: [{ chords: "E5 - D5 - C5 - A5", lyrics: "(heavy riffing, fast tempo, ends on E5)" }] }
-    ]
-  },
-  {
-    title: "Handle with Care",
-    artist: "Traveling Wilburys",
-    sections: [
-      { type: "Intro", lines: [{ chords: "G         D         Em        C", lyrics: "" }] },
-      { type: "Verse 1", lines: [
-        { chords: "G                D                 Em                 C", lyrics: "Been beat up and battered 'round, been sent up, and I've been shot down..." },
-        { chords: "G                D                 Em                 C", lyrics: "You're the best thing that I've found, handle me with care." }
-      ]},
-      { type: "Chorus 1", lines: [
-        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" },
-        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" }
-      ]},
-      { type: "Verse 2", lines: [
-        { chords: "G                D                 Em                 C", lyrics: "I been stuck in so much traffic, I'm a mess, a nervous wreck..." },
-        { chords: "G                D                 Em                 C", lyrics: "I could use some tender love and care, handle me with care." }
-      ]},
-      { type: "Chorus 2", lines: [
-        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" },
-        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" }
-      ]},
-      { type: "Outro", lines: [{ chords: "G         D         Em        C", lyrics: "(repeat and fade)" }] }
-    ]
-  }
-];
-
-
-// Simplified chord to MIDI note mapping
-// Maps chord root to MIDI note number (C4 = 60) and then adds intervals for Major/Minor triad
-const chordToMidi = (chordName) => {
-  const rootMap = {
-    'C': 60, 'C#': 61, 'Db': 61, 'D': 62, 'D#': 63, 'Eb': 63, 'E': 64, 'F': 65,
-    'F#': 66, 'Gb': 66, 'G': 67, 'G#': 68, 'Ab': 68, 'A': 69, 'A#': 70, 'Bb': 70, 'B': 71
-  };
-
-  let root = null;
-  let type = 'major'; // Default to major
-  let octaveOffset = 0; // Default to 4th octave for root
-
-  // Parse root and accidental (e.g., C#, Eb)
-  let baseChord = chordName.trim().replace('5', ''); // Handle power chords as root
-  const match = baseChord.match(/^([A-G][b#]?)/);
-  if (match) {
-    root = rootMap[match[1]];
-    baseChord = baseChord.substring(match[1].length); // Remove root for type parsing
-  } else {
-    // Fallback for unparseable roots, or just return empty
-    return [];
-  }
-
-  // Determine chord type (simple major/minor/power for now)
-  if (baseChord.includes('m') || baseChord.includes('min')) {
-    type = 'minor';
-  } else if (baseChord.includes('5')) { // Explicit power chord
-    type = 'power';
-  }
-
-  if (root === null) return []; // Should not happen with match check above
-
-  const notes = [root + octaveOffset];
-  if (type === 'major') {
-    notes.push(root + 4 + octaveOffset); // Major third
-    notes.push(root + 7 + octaveOffset); // Perfect fifth
-  } else if (type === 'minor') {
-    notes.push(root + 3 + octaveOffset); // Minor third
-    notes.push(root + 7 + octaveOffset); // Perfect fifth
-  } else if (type === 'power') {
-    notes.push(root + 7 + octaveOffset); // Perfect fifth
-  }
-
-  // Add higher octave for fuller sound, if it makes sense
-  if (notes.length > 0) {
-    notes.push(notes[0] + 12); // Add root an octave higher
-  }
-
-  return notes;
-};
-
-
-// Main App Component
-const App = () => {
-  const [currentSongIndex, setCurrentSongIndex] = useState(0);
-  const [currentTempo, setCurrentTempo] = useState(90); // Default to Medium tempo
-  const synthRef = useRef(null);
-  const playSequenceRef = useRef(null);
-
-  // Define tempo presets
-  const tempos = {
-    slow: 30,
-    medium: 90, // Changed from previous default for distinct steps
-    fast: 128
-  };
-
-  // Initialize Tone.js synth once
-  useEffect(() => {
-    // Only create synth if it doesn't exist
-    if (!synthRef.current) {
-      synthRef.current = new Tone.PolySynth(Tone.Synth, {
-        envelope: {
-          attack: 0.02,
-          decay: 0.1,
-          sustain: 0.3,
-          release: 1
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chord Sheet Teleprompter</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Tone.js CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.min.js"></script>
+    <style>
+        body {
+            font-family: "Inter", sans-serif;
+            margin: 0;
+            overflow: hidden; /* Prevent body scroll, main content handles scroll */
         }
-      }).toDestination();
-    }
-
-    // Cleanup function
-    return () => {
-      if (synthRef.current) {
-        synthRef.current.dispose();
-        synthRef.current = null;
-      }
-      if (playSequenceRef.current) {
-        playSequenceRef.current.stop();
-        playSequenceRef.current.dispose();
-        playSequenceRef.current = null;
-      }
-      Tone.Transport.stop(); // Stop transport on unmount
-    };
-  }, []); // Run once on mount
-
-  const currentSong = songsData[currentSongIndex];
-
-  const handleNextSong = () => {
-    if (playSequenceRef.current) {
-      playSequenceRef.current.stop(); // Stop any current playback
-    }
-    setCurrentSongIndex((prevIndex) => (prevIndex + 1) % songsData.length);
-  };
-
-  const handlePrevSong = () => {
-    if (playSequenceRef.current) {
-      playSequenceRef.current.stop(); // Stop any current playback
-    }
-    setCurrentSongIndex((prevIndex) => (prevIndex - 1 + songsData.length) % songsData.length);
-  };
-
-  const setTempo = (tempoValue) => {
-    setCurrentTempo(tempoValue);
-    Tone.Transport.bpm.value = tempoValue; // Update Tone.js Transport BPM
-    if (playSequenceRef.current && Tone.Transport.state === 'started') {
-        // If playing, restart the sequence to apply tempo immediately
-        playChords(); // This will stop and restart with new tempo
-    }
-  };
-
-
-  const playChords = useCallback(async () => {
-    if (!synthRef.current) {
-      console.error("Synth not initialized.");
-      return;
-    }
-
-    // Start Tone.js audio context if not already started
-    if (Tone.context.state !== 'running') {
-      await Tone.start();
-      console.log('Audio context started.');
-    }
-
-    // Stop any existing sequence and transport
-    if (playSequenceRef.current) {
-      playSequenceRef.current.stop();
-      playSequenceRef.current.dispose();
-      playSequenceRef.current = null;
-    }
-    Tone.Transport.stop();
-    Tone.Transport.cancel(); // Clear any scheduled events
-
-    // Set the tempo before starting the transport
-    Tone.Transport.bpm.value = currentTempo;
-
-    const allChords = [];
-    currentSong.sections.forEach(section => {
-      section.lines.forEach(line => {
-        // Simple regex to extract individual chord names, assume space-separated
-        const chordsInLine = line.chords.split(/\s+/).filter(c => c.length > 0);
-        chordsInLine.forEach(chord => allChords.push(chord));
-      });
-    });
-
-    if (allChords.length === 0) {
-      console.warn("No chords found for this song.");
-      return;
-    }
-
-    // Create a new sequence for playback
-    // The interval '1n' means one whole note per chord in this sequence
-    // Tone.js Transport BPM controls the actual duration of '1n'
-    playSequenceRef.current = new Tone.Sequence((time, chordName) => {
-      const midiNotes = chordToMidi(chordName);
-      if (midiNotes.length > 0) {
-        synthRef.current.triggerAttackRelease(midiNotes.map(n => Tone.Midi(n).toNote()), "0.8n", time); // hold for 0.8 of a whole note
-      }
-    }, allChords, "1n").start(0); // Each chord plays for 1 whole note duration
-
-    Tone.Transport.start();
-
-  }, [currentSong, currentTempo]); // Recreate sequence if current song or tempo changes
-
-  // Stop playback when song index changes
-  useEffect(() => {
-    if (playSequenceRef.current) {
-      playSequenceRef.current.stop();
-      Tone.Transport.stop();
-    }
-  }, [currentSongIndex]);
-
-
-  return (
-    <div className="flex flex-col h-screen bg-gray-900 text-gray-100 font-inter">
-      {/* Header with song title and artist */}
-      <header className="p-4 bg-gray-800 shadow-md text-center rounded-b-lg">
-        <h1 className="text-3xl font-bold text-blue-400">
-          {currentSong.title}
-        </h1>
-        <p className="text-xl text-gray-300">{currentSong.artist}</p>
-      </header>
-
-      {/* Main content area - lyrics and chords */}
-      <main className="flex-1 overflow-y-auto p-6 text-2xl leading-relaxed">
-        {currentSong.sections.map((section, secIndex) => (
-          <div key={secIndex} className="mb-8">
-            <h2 className="text-3xl font-semibold text-yellow-300 mb-4 sticky top-0 bg-gray-900 py-2 z-10">
-              {section.type}
-            </h2>
-            {section.lines.map((line, lineIndex) => (
-              <div key={lineIndex} className="mb-4">
-                <p className="font-bold text-green-300 whitespace-pre">
-                  {line.chords}
-                </p>
-                <p className="text-gray-100">
-                  {line.lyrics}
-                </p>
-              </div>
-            ))}
-          </div>
-        ))}
-      </main>
-
-      {/* Navigation and MIDI controls */}
-      <footer className="p-4 bg-gray-800 shadow-t-md flex justify-center items-center space-x-4 rounded-t-lg flex-wrap">
-        <button
-          onClick={handlePrevSong}
-          className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2"
-        >
-          Previous Song
-        </button>
-        <button
-          onClick={() => setTempo(tempos.slow)}
-          className={`py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 ${currentTempo === tempos.slow ? 'bg-purple-700' : 'bg-purple-500 hover:bg-purple-600'} text-white font-bold`}
-        >
-          Slow ({tempos.slow} BPM)
+        /* Custom scrollbar for main content */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 8px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #2d3748; /* bg-gray-800 */
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #4a5568; /* bg-gray-600 */
+            border-radius: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #6b7280; /* bg-gray-500 */
+        }
+        /* Preserve whitespace and prevent wrapping for chords */
+        .whitespace-pre {
+            white-space: pre;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 flex flex-col h-screen">
+
+    <!-- Header Section -->
+    <header class="p-4 bg-gray-800 shadow-md text-center rounded-b-lg flex flex-col items-center justify-center">
+        <div class="flex items-center justify-center space-x-4 mb-2">
+            <button id="prevSongBtnHeader" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                &#9650; <!-- Up Arrow -->
+            </button>
+            <div class="text-center">
+                <h1 id="songTitle" class="text-3xl font-bold text-blue-400"></h1>
+                <p id="artistName" class="text-xl text-gray-300"></p>
+            </div>
+            <button id="nextSongBtnHeader" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
+                &#9660; <!-- Down Arrow -->
+            </button>
+        </div>
+    </header>
+
+    <!-- Main Content Area - Lyrics and Chords -->
+    <main id="scrollContainer" class="flex-1 overflow-y-auto p-6 text-2xl leading-relaxed custom-scrollbar">
+        <!-- Song content will be rendered here by JavaScript -->
+    </main>
+
+    <!-- Footer Section - Controls -->
+    <footer class="p-4 bg-gray-800 shadow-t-md flex justify-center items-center space-x-4 rounded-t-lg flex-wrap">
+        <button id="slowTempoBtn" class="py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 bg-purple-500 hover:bg-purple-600 text-white font-bold">
+            Slow (30 BPM)
         </button>
-        <button
-          onClick={() => setTempo(tempos.medium)}
-          className={`py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 ${currentTempo === tempos.medium ? 'bg-purple-700' : 'bg-purple-500 hover:bg-purple-600'} text-white font-bold`}
-        >
-          Medium ({tempos.medium} BPM)
+        <button id="mediumTempoBtn" class="py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 bg-purple-700 text-white font-bold">
+            Medium (90 BPM)
         </button>
-        <button
-          onClick={() => setTempo(tempos.fast)}
-          className={`py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 ${currentTempo === tempos.fast ? 'bg-purple-700' : 'bg-purple-500 hover:bg-purple-600'} text-white font-bold`}
-        >
-          Fast ({tempos.fast} BPM)
+        <button id="fastTempoBtn" class="py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2 bg-purple-500 hover:bg-purple-600 text-white font-bold">
+            Fast (128 BPM)
         </button>
-        <button
-          onClick={playChords}
-          className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2"
-        >
-          Play Chords
+        <button id="arpeggioDirectionBtn" class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2">
+            Arpeggio: Rising
         </button>
-        <button
-          onClick={handleNextSong}
-          className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2"
-        >
-          Next Song
+        <button id="startTeleprompterBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 my-2">
+            Start/Restart Teleprompter (Press Space/Right Arrow)
         </button>
-      </footer>
-    </div>
-  );
-};
+    </footer>
+
+    <script>
+        // Song data
+        const songsData = [
+            {
+                title: "Talkin' 'bout a Revolution",
+                artist: "Tracy Chapman",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "G         C         D         G", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "G           C           D             G", lyrics: "While outside a revolution's talking..." },
+                        { chords: "G           C           D             G", lyrics: "It's gonna come, it's gonna come..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution, oh, no" },
+                        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution..." }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "G           C           D             G", lyrics: "While outside a revolution's talking..." },
+                        { chords: "G           C           D             G", lyrics: "It's gonna come, it's gonna come..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution, oh, no" },
+                        { chords: "G             C        D              G", lyrics: "Talkin' 'bout a revolution..." }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "G         C         D         G", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Fast Car",
+                artist: "Tracy Chapman",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "C                 G               Am               F", lyrics: "You got a fast car, I want a ticket to anywhere..." },
+                        { chords: "C                 G               Am               F", lyrics: "We go driving in it, anywhere, maybe we'll make a deal..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "C                 G               Am               F", lyrics: "So remember when we were driving, driving in your car..." },
+                        { chords: "C                 G               Am               F", lyrics: "The speed of light, we gotta go, go, go, go, go..." }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "C                 G               Am               F", lyrics: "You got a fast car, I got a plan to get us out of here..." },
+                        { chords: "C                 G               Am               F", lyrics: "I been working at the convenience store, so slow..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "C                 G               Am               F", lyrics: "So remember when we were driving, driving in your car..." },
+                        { chords: "C                 G               Am               F", lyrics: "The speed of light, we gotta go, go, go, go, go..." }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Cult of Personality",
+                artist: "Living Colour",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "Em        G         C         D", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "Em        G             C          D", lyrics: "Look in my eyes, what do you see?" },
+                        { chords: "Em        G             C          D", lyrics: "The cult of personality." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "Em        G             C          D", lyrics: "Cult of Personality! Cult of Personality!" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "Em        G             C          D", lyrics: "I look in your eyes, what do I see?" },
+                        { chords: "Em        G             C          D", lyrics: "The cult of personality." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "Em        G             C          D", lyrics: "Cult of Personality! Cult of Personality!" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "Em        G         C         D", lyrics: "(repeated, building to a final hit on Em)" }] }
+                ]
+            },
+            {
+                title: "Glamour Boys",
+                artist: "Living Colour",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "E         B         A         E", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "E               B", lyrics: "The Glamour Boys, they got the girls" },
+                        { chords: "A               E", lyrics: "They got the cars, they got the pearls" }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "E                 B               A                  E", lyrics: "Glamour Boys, oh, the Glamour Boys, what makes you think you're so cool?" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "E               B", lyrics: "The Glamour Boys, they're so hip" },
+                        { chords: "A               E", lyrics: "They got the style, they got the trip" }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "E                 B               A                  E", lyrics: "Glamour Boys, oh, the Glamour Boys, what makes you think you're so cool?" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "E         B         A         E", lyrics: "(repeat and fade with guitar licks)" }] }
+                ]
+            },
+            {
+                title: "Ocean Size",
+                artist: "Jane's Addiction",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "C              G               Am                F", lyrics: "Day by day, as the weeks turn to months, I watch you..." },
+                        { chords: "C              G               Am                F", lyrics: "Growing taller, growing wiser, growing stronger..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "C        G          D          F", lyrics: "Ocean size, it's the ocean size" },
+                        { chords: "C        G          D          F", lyrics: "The ocean size, it's the ocean size" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "C              G               Am                F", lyrics: "Day by day, as the weeks turn to months, I watch you..." },
+                        { chords: "C              G               Am                F", lyrics: "Growing stronger, growing wiser, growing taller..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "C        G          D          F", lyrics: "Ocean size, it's the ocean size" },
+                        { chords: "C        G          D          F", lyrics: "The ocean size, it's the ocean size" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Mountain Song",
+                artist: "Jane's Addiction",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "Em        C         G         D", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "Em            C               G              D", lyrics: "Coming down the mountain, I saw a girl" },
+                        { chords: "Em            C               G              D", lyrics: "She was looking at me, in my world" }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "Em       C       G        D", lyrics: "Mountain Song! Mountain Song!" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "Em            C               G              D", lyrics: "She said, \"Where'd you come from? Where'd you go?\"" },
+                        { chords: "Em            C               G              D", lyrics: "\"I came from the mountain, don't you know?\"" }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "Em       C       G        D", lyrics: "Mountain Song! Mountain Song!" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "Em        C         G         D", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Where Is My Mind?",
+                artist: "Pixies",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "C         G         Am        F", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "C               G               Am            F", lyrics: "With your feet on the air and your head on the ground..." },
+                        { chords: "C               G               Am            F", lyrics: "Try this trick and spin it, yeah..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "C               G               Am            F", lyrics: "Where is my mind? Where is my mind?" },
+                        { chords: "C               G               Am            F", lyrics: "Where is my mind? Way out in the water, see it swimming..." }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "C               G               Am            F", lyrics: "I was thinking about you and the things we've done..." },
+                        { chords: "C               G               Am            F", lyrics: "And all the places we've been to, oh yeah..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "C               G               Am            F", lyrics: "Where is my mind? Where is my mind?" },
+                        { chords: "C               G               Am            F", lyrics: "Where is my mind? Way out in the water, see it swimming..." }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "C         G         Am        F", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Fisherman's Blues",
+                artist: "The Waterboys",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "G         C         D         G", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "G            C               D               G", lyrics: "I wish I was a fisherman, tumbling on the sea" },
+                        { chords: "G            C               D               G", lyrics: "Far away from dry land, and its bitter misery" }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "G             C               D               G", lyrics: "I'm gonna make a record, a record of my dreams" },
+                        { chords: "G             C               D               G", lyrics: "And let the wind and the waves sing along to the themes" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "G            C               D               G", lyrics: "I wish I was a fisherman, out on the rolling deep" },
+                        { chords: "G            C               D               G", lyrics: "With nothing but the stars to guide me, while the city sleeps" }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "G             C               D               G", lyrics: "I'm gonna make a record, a record of my dreams" },
+                        { chords: "G             C               D               G", lyrics: "And let the wind and the waves sing along to the themes" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "G         C         D         G", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "Express Yourself",
+                artist: "N.W.A.",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "F         Am        Dm        C", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "F               Am                Dm                 C", lyrics: "I'm expressing with my full capabilities, and now I'm living in reality..." },
+                        { chords: "F               Am                Dm                 C", lyrics: "The only solution is to get involved and move it..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! Express yourself!" },
+                        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! It's a brand new thing..." }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "F               Am                Dm                 C", lyrics: "Now I'm the one, I'm the one, I'm the one that you know..." },
+                        { chords: "F               Am                Dm                 C", lyrics: "Coming to get you, coming to get you, coming to get you, watch me go..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! Express yourself!" },
+                        { chords: "F               Am                Dm                 C", lyrics: "Express yourself! It's a brand new thing..." }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "F         Am        Dm        C", lyrics: "(repeat and fade)" }] }
+                ]
+            },
+            {
+                title: "One",
+                artist: "Metallica",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "Am        G         C         F", lyrics: "(Acoustic Intro/Verse Part)" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "Am             G             C              F", lyrics: "I can't remember anything, can't tell if this is true or dream..." },
+                        { chords: "Am             G             C              F", lyrics: "Deep down inside I feel the scream..." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "Am             G             C              F", lyrics: "Hold my breath as I wish for death..." }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "Am             G             C              F", lyrics: "Life it seems will fade away, drifting further every day..." },
+                        { chords: "Am             G             C              F", lyrics: "Getting lost within myself, nothing matters, no one else..." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "Am             G             C              F", lyrics: "All the thoughts that I have now..." }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "E5 - D5 - C5 - A5", lyrics: "(heavy riffing, fast tempo, ends on E5)" }] }
+                ]
+            },
+            {
+                title: "Handle with Care",
+                artist: "Traveling Wilburys",
+                sections: [
+                    { type: "Intro", lines: [{ chords: "G         D         Em        C", lyrics: "" }] },
+                    { type: "Verse 1", lines: [
+                        { chords: "G                D                 Em                 C", lyrics: "Been beat up and battered 'round, been sent up, and I've been shot down..." },
+                        { chords: "G                D                 Em                 C", lyrics: "You're the best thing that I've found, handle me with care." }
+                    ]},
+                    { type: "Chorus 1", lines: [
+                        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" },
+                        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" }
+                    ]},
+                    { type: "Verse 2", lines: [
+                        { chords: "G                D                 Em                 C", lyrics: "I been stuck in so much traffic, I'm a mess, a nervous wreck..." },
+                        { chords: "G                D                 Em                 C", lyrics: "I could use some tender love and care, handle me with care." }
+                    ]},
+                    { type: "Chorus 2", lines: [
+                        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" },
+                        { chords: "G                D                 Em                 C", lyrics: "Handle me with care, handle me with care" }
+                    ]},
+                    { type: "Outro", lines: [{ chords: "G         D         Em        C", lyrics: "(repeat and fade)" }] }
+                ]
+            }
+        ];
+
+        // --- Global State Variables ---
+        let currentSongIndex = 0;
+        let currentTempo = 90; // Default to Medium
+        let isInteractiveMode = false;
+        let activeSectionIndex = 0;
+        let activeLineIndexInSection = 0;
+        let activeChordIndexInLine = 0;
+        let activeWordIndexInLine = 0;
+        let arpeggioDirection = 'rising'; // 'rising' or 'falling'
+
+        // --- DOM Elements ---
+        const songTitleEl = document.getElementById('songTitle');
+        const artistNameEl = document.getElementById('artistName');
+        const scrollContainerEl = document.getElementById('scrollContainer');
+        const prevSongBtnHeader = document.getElementById('prevSongBtnHeader');
+        const nextSongBtnHeader = document.getElementById('nextSongBtnHeader');
+        const slowTempoBtn = document.getElementById('slowTempoBtn');
+        const mediumTempoBtn = document.getElementById('mediumTempoBtn');
+        const fastTempoBtn = document.getElementById('fastTempoBtn');
+        const arpeggioDirectionBtn = document.getElementById('arpeggioDirectionBtn');
+        const startTeleprompterBtn = document.getElementById('startTeleprompterBtn');
+
+        // --- Tone.js Synth Initialization ---
+        let synth = null;
+        async function initializeSynth() {
+            if (!synth) {
+                synth = new Tone.PolySynth(Tone.Synth, {
+                    envelope: {
+                        attack: 0.02,
+                        decay: 0.1,
+                        sustain: 0.3,
+                        release: 1
+                    }
+                }).toDestination();
+                await Tone.start(); // Ensure audio context is running
+                console.log('Tone.js audio context started and synth initialized.');
+            }
+        }
+
+        // --- Tempo Presets ---
+        const tempos = {
+            slow: 30,
+            medium: 90,
+            fast: 128
+        };
+
+        // --- Helper: Chord to MIDI Note Mapping ---
+        const chordToMidi = (chordName) => {
+            const rootMap = {
+                'C': 60, 'C#': 61, 'Db': 61, 'D': 62, 'D#': 63, 'Eb': 63, 'E': 64, 'F': 65,
+                'F#': 66, 'Gb': 66, 'G': 67, 'G#': 68, 'Ab': 68, 'A': 69, 'A#': 70, 'Bb': 70, 'B': 71
+            };
+
+            let root = null;
+            let type = 'major'; // Default to major
+            let octaveOffset = 0; // Default to 4th octave for root
+
+            let baseChord = chordName.trim().replace('5', ''); // Handle power chords as root
+            const match = baseChord.match(/^([A-G][b#]?)/);
+            if (match) {
+                root = rootMap[match[1]];
+                baseChord = baseChord.substring(match[1].length); // Remove root for type parsing
+            } else {
+                return []; // Fallback for unparseable roots
+            }
+
+            // Determine chord type (simple major/minor/power for now)
+            if (baseChord.includes('m') || baseChord.includes('min')) {
+                type = 'minor';
+            } else if (baseChord.includes('dim')) {
+                type = 'diminished';
+            } else if (chordName.includes('5')) { // Explicit power chord check using original chordName
+                type = 'power';
+            }
+
+            if (root === null) return [];
+
+            const notes = [root + octaveOffset]; // Root
+            if (type === 'major') {
+                notes.push(root + 4 + octaveOffset); // Major 3rd
+            } else if (type === 'minor') {
+                notes.push(root + 3 + octaveOffset); // Minor 3rd
+            } else if (type === 'diminished') {
+                notes.push(root + 3 + octaveOffset); // Minor 3rd
+            }
+            notes.push(root + 7 + octaveOffset); // Perfect 5th
+
+            // Add the root an octave higher for a fuller sound in the arpeggio
+            notes.push(root + 12 + octaveOffset);
+
+            return notes;
+        };
+
+        // --- Helper: Play Arpeggio ---
+        async function playArpeggio(chordName, direction) {
+            await initializeSynth(); // Ensure synth is ready
+
+            Tone.Transport.stop();
+            Tone.Transport.cancel(); // Clear any existing schedules
+
+            const arpeggioNotes = chordToMidi(chordName);
+            if (arpeggioNotes.length === 0) return;
+
+            const notesToPlay = direction === 'rising' ? arpeggioNotes : [...arpeggioNotes].reverse();
+
+            const noteDuration = Tone.Time("8n").toSeconds(); // Each note in arpeggio is an 8th note
+            let startTime = Tone.Transport.now();
+
+            notesToPlay.forEach((midiNote, index) => {
+                synth.triggerAttackRelease(
+                    Tone.Midi(midiNote).toNote(),
+                    "16n", // Shorter attack for arpeggio notes
+                    startTime + (index * noteDuration * 0.5) // Stagger notes
+                );
+            });
+
+            Tone.Transport.start(); // Start transport for this one-shot sequence
+            // Stop transport after a short delay, to ensure arpeggio finishes
+            Tone.Transport.scheduleOnce((time) => {
+                Tone.Transport.stop();
+                Tone.Transport.cancel();
+            }, `+${noteDuration * notesToPlay.length}`);
+        }
+
+        // --- Rendering Function ---
+        function renderSong() {
+            const song = songsData[currentSongIndex];
+            songTitleEl.textContent = song.title;
+            artistNameEl.textContent = song.artist;
+            scrollContainerEl.innerHTML = ''; // Clear previous content
+
+            song.sections.forEach((section, secIndex) => {
+                const sectionDiv = document.createElement('div');
+                sectionDiv.className = 'mb-8';
+
+                const sectionTitle = document.createElement('h2');
+                sectionTitle.className = 'text-3xl font-semibold text-yellow-300 mb-4 sticky top-0 bg-gray-900 py-2 z-10';
+                sectionTitle.textContent = section.type;
+                sectionDiv.appendChild(sectionTitle);
+
+                section.lines.forEach((line, lineIndex) => {
+                    const lineDiv = document.createElement('div');
+                    lineDiv.className = `mb-4`;
+                    lineDiv.dataset.sectionIndex = secIndex;
+                    lineDiv.dataset.lineIndex = lineIndex;
+
+                    const chordsP = document.createElement('p');
+                    chordsP.className = 'font-bold text-green-300 whitespace-pre';
+                    const chordsInLine = line.chords.split(/\s+/).filter(c => c.length > 0);
+                    chordsInLine.forEach((chord, chordMapIndex) => {
+                        const chordSpan = document.createElement('span');
+                        chordSpan.textContent = chord;
+                        // Add spaces for visual alignment
+                        chordSpan.innerHTML += '&nbsp;&nbsp;'; // Use innerHTML for non-breaking space
+                        chordSpan.dataset.chordIndex = chordMapIndex;
+                        chordsP.appendChild(chordSpan);
+                    });
+                    lineDiv.appendChild(chordsP);
+
+                    const lyricsP = document.createElement('p');
+                    lyricsP.className = 'text-gray-100';
+                    const wordsInLine = line.lyrics.split(/\s+/).filter(w => w.length > 0);
+                    wordsInLine.forEach((word, wordMapIndex) => {
+                        const wordSpan = document.createElement('span');
+                        wordSpan.textContent = word;
+                        wordSpan.innerHTML += '&nbsp;'; // Add space between words
+                        wordSpan.dataset.wordIndex = wordMapIndex;
+                        lyricsP.appendChild(wordSpan);
+                    });
+                    lineDiv.appendChild(lyricsP);
+
+                    sectionDiv.appendChild(lineDiv);
+                });
+                scrollContainerEl.appendChild(sectionDiv);
+            });
+            updateHighlighting(); // Initial highlighting
+        }
+
+        // --- Highlighting Logic ---
+        function updateHighlighting() {
+            // Clear all existing highlights
+            document.querySelectorAll('.text-red-400').forEach(el => el.classList.remove('text-red-400', 'transition-colors', 'duration-200'));
+            document.querySelectorAll('.text-blue-300.font-extrabold').forEach(el => el.classList.remove('text-blue-300', 'font-extrabold', 'transition-colors', 'duration-200'));
+            document.querySelectorAll('.bg-gray-800.rounded-md.p-2').forEach(el => el.classList.remove('bg-gray-800', 'rounded-md', 'p-2'));
+
+
+            if (isInteractiveMode) {
+                const activeLineDiv = scrollContainerEl.querySelector(
+                    `[data-section-index="${activeSectionIndex}"][data-line-index="${activeLineIndexInSection}"]`
+                );
+                if (activeLineDiv) {
+                    activeLineDiv.classList.add('bg-gray-800', 'rounded-md', 'p-2');
+
+                    const activeChordSpan = activeLineDiv.querySelector(`p.text-green-300 span[data-chord-index="${activeChordIndexInLine}"]`);
+                    if (activeChordSpan) {
+                        activeChordSpan.classList.add('text-red-400', 'transition-colors', 'duration-200');
+                    }
+
+                    const activeWordSpan = activeLineDiv.querySelector(`p.text-gray-100 span[data-word-index="${activeWordIndexInLine}"]`);
+                    if (activeWordSpan) {
+                        activeWordSpan.classList.add('text-blue-300', 'font-extrabold', 'transition-colors', 'duration-200');
+                    }
+
+                    // Auto-scroll the active line into view if it's out of bounds
+                    const containerHeight = scrollContainerEl.clientHeight;
+                    const lineTop = activeLineDiv.offsetTop;
+                    const lineBottom = lineTop + activeLineDiv.clientHeight;
+
+                    if (lineTop < scrollContainerEl.scrollTop || lineBottom > scrollContainerEl.scrollTop + containerHeight) {
+                        scrollContainerEl.scrollTop = lineTop - (containerHeight / 3); // Scroll to about a third down the screen
+                    }
+                }
+            }
+        }
+
+        // --- Core KeyPress Logic (Teleprompter Advance) ---
+        function handleKeyPress(event) {
+            if (!isInteractiveMode) return;
+
+            if (event.code === 'Space' || event.code === 'ArrowRight') {
+                event.preventDefault(); // Prevent page scrolling
+
+                const currentSong = songsData[currentSongIndex];
+                const currentSection = currentSong.sections[activeSectionIndex];
+                const currentLine = currentSection?.lines[activeLineIndexInSection];
+                const chordsInCurrentLine = currentLine?.chords.split(/\s+/).filter(c => c.length > 0) || [];
+                const wordsInCurrentLine = currentLine?.lyrics.split(/\s+/).filter(w => w.length > 0) || [];
+
+                // Play arpeggio for the current chord before advancing
+                const chordToPlay = chordsInCurrentLine[activeChordIndexInLine];
+                if (chordToPlay) {
+                    playArpeggio(chordToPlay, arpeggioDirection);
+                }
+
+                let newChordIndex = activeChordIndexInLine + 1;
+                let newWordIndex = activeWordIndexInLine + 1;
+                let newActiveLineIndex = activeLineIndexInSection;
+                let newActiveSectionIndex = activeSectionIndex;
+
+                const allWordsCovered = newWordIndex >= wordsInCurrentLine.length;
+                const allChordsCovered = newChordIndex >= chordsInCurrentLine.length;
+
+                if (allWordsCovered && allChordsCovered) {
+                    // Both words and chords on the current line are covered, move to next line
+                    newActiveLineIndex++;
+                    newChordIndex = 0;
+                    newWordIndex = 0;
+
+                    if (newActiveLineIndex >= currentSection.lines.length) {
+                        // All lines in current section covered, move to next section
+                        newActiveSectionIndex++;
+                        newActiveLineIndex = 0; // Reset line index for new section
+
+                        if (newActiveSectionIndex >= currentSong.sections.length) {
+                            // End of song
+                            console.log("End of song!");
+                            isInteractiveMode = false; // Exit interactive mode
+                            activeSectionIndex = 0;
+                            activeLineIndexInSection = 0;
+                            activeChordIndexInLine = 0;
+                            activeWordIndexInLine = 0;
+                            Tone.Transport.stop();
+                            Tone.Transport.cancel();
+                            updateHighlighting(); // Clear final highlights
+                            return;
+                        }
+                    }
+                } else if (newChordIndex >= chordsInCurrentLine.length && !allWordsCovered) {
+                    // All chords on line covered, but words remain. Advance words only.
+                    // Keep chord index at the last chord.
+                    newChordIndex = chordsInCurrentLine.length > 0 ? chordsInCurrentLine.length - 1 : 0;
+                } else if (newWordIndex >= wordsInCurrentLine.length && !allChordsCovered) {
+                    // All words on line covered, but chords remain. Advance chords only.
+                    // Keep word index at the last word.
+                    newWordIndex = wordsInCurrentLine.length > 0 ? wordsInCurrentLine.length - 1 : 0;
+                }
+
+
+                activeChordIndexInLine = newChordIndex;
+                activeWordIndexInLine = newWordIndex;
+                activeLineIndexInSection = newActiveLineIndex;
+                activeSectionIndex = newActiveSectionIndex;
+
+                updateHighlighting();
+            }
+        }
+
+        // --- Event Handlers ---
+        function handleSongChange(direction) {
+            isInteractiveMode = false; // Exit interactive mode on song change
+            Tone.Transport.stop();
+            Tone.Transport.cancel();
+
+            if (direction === 'next') {
+                currentSongIndex = (currentSongIndex + 1) % songsData.length;
+            } else if (direction === 'prev') {
+                currentSongIndex = (currentSongIndex - 1 + songsData.length) % songsData.length;
+            }
+
+            // Reset teleprompter state for the new song
+            activeSectionIndex = 0;
+            activeLineIndexInSection = 0;
+            activeChordIndexInLine = 0;
+            activeWordIndexInLine = 0;
+            scrollContainerEl.scrollTop = 0; // Scroll to top
+
+            renderSong(); // Re-render the new song
+        }
+
+        function setTempo(tempoValue) {
+            currentTempo = tempoValue;
+            Tone.Transport.bpm.value = tempoValue;
+            // Update button styles
+            slowTempoBtn.classList.remove('bg-purple-700');
+            mediumTempoBtn.classList.remove('bg-purple-700');
+            fastTempoBtn.classList.remove('bg-purple-700');
+            slowTempoBtn.classList.add('bg-purple-500', 'hover:bg-purple-600');
+            mediumTempoBtn.classList.add('bg-purple-500', 'hover:bg-purple-600');
+            fastTempoBtn.classList.add('bg-purple-500', 'hover:bg-purple-600');
+
+            if (tempoValue === tempos.slow) slowTempoBtn.classList.replace('bg-purple-500', 'bg-purple-700');
+            else if (tempoValue === tempos.medium) mediumTempoBtn.classList.replace('bg-purple-500', 'bg-purple-700');
+            else if (tempoValue === tempos.fast) fastTempoBtn.classList.replace('bg-purple-500', 'bg-purple-700');
+        }
+
+        function toggleArpeggioDirection() {
+            arpeggioDirection = arpeggioDirection === 'rising' ? 'falling' : 'rising';
+            arpeggioDirectionBtn.textContent = `Arpeggio: ${arpeggioDirection.charAt(0).toUpperCase() + arpeggioDirection.slice(1)}`;
+        }
+
+        function startTeleprompter() {
+            isInteractiveMode = true;
+            activeSectionIndex = 0;
+            activeLineIndexInSection = 0;
+            activeChordIndexInLine = 0;
+            activeWordIndexInLine = 0;
+            scrollContainerEl.scrollTop = 0; // Scroll to top on start
+            initializeSynth(); // Ensure synth is ready
+            Tone.Transport.stop(); // Stop any previous playback
+            Tone.Transport.cancel();
+            Tone.Transport.bpm.value = currentTempo; // Set tempo for interactive playback
+            updateHighlighting(); // Apply initial highlight
+        }
 
-export default App;
+        // --- Initial Setup and Event Listeners ---
+        document.addEventListener('DOMContentLoaded', () => {
+            renderSong(); // Render the first song on load
+            setTempo(tempos.medium); // Set initial tempo button state
+
+            // Attach event listeners
+            prevSongBtnHeader.addEventListener('click', () => handleSongChange('prev'));
+            nextSongBtnHeader.addEventListener('click', () => handleSongChange('next'));
+            slowTempoBtn.addEventListener('click', () => setTempo(tempos.slow));
+            mediumTempoBtn.addEventListener('click', () => setTempo(tempos.medium));
+            fastTempoBtn.addEventListener('click', () => setTempo(tempos.fast));
+            arpeggioDirectionBtn.addEventListener('click', toggleArpeggioDirection);
+            startTeleprompterBtn.addEventListener('click', startTeleprompter);
+
+            window.addEventListener('keydown', handleKeyPress);
+        });
+    </script>
+</body>
+</html>