Spaces:

luigi12345
/

Automusic

Running

App Files Files Community

luigi12345 commited on 5 days ago

Commit

173b7fd

verified ·

1 Parent(s): d6943da

Update index.html

Browse files

Files changed (1) hide show

index.html +342 -378

index.html CHANGED Viewed

@@ -1,436 +1,400 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Bach-like Fugue in A Minor</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.css">
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow-debug.js"></script>
-  <!-- Use WebAudioFont for piano sound -->
-  <script src="https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js"></script>
-  <script src="https://surikov.github.io/webaudiofontdata/sound/0000_JCLive_sf2_file.js"></script>
     <style>
-        body {
-            font-family: sans-serif;
-        }
-        #score {
-          /* Styling to improve print layout */
-          width: 750px; /* A4 width approximation at 96 DPI */
-          margin: 20px auto; /* Center on the page */
-          background-color: white;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
-          padding: 25px; /* Add padding */
-          page-break-after: always; /* Force page break after each score */
-          overflow: visible; /*Ensure nothing is clipped */
-        }
-        #player-controls {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        button {
-            padding: 10px 20px;
-            font-size: 16px;
-            cursor: pointer;
         }
         @media print {
-            body {
-                margin: 0; /* Remove default margins */
-                padding: 0;
-                 width: 100%; /* Use 100% width for printing */
-            }
-           #score {
-                box-shadow: none; /* Remove shadow for printing*/
-                width: 100%;  /* Adjust width */
-                margin: 0;
-                padding:0;
-                page-break-inside: avoid;
-                break-inside: avoid;
-           }
-            #player-controls{
-                display:none;
-            }
-            /* Hide controls on print */
-            #player-controls, button {
-                display: none;
-            }
-            .vf-stavenote {
-                transform: scale(1) !important; /* Ensure notes aren't scaled down */
-            }
         }
   </style>
 </head>
 <body>
-<h1>Fugue in A Minor (Bach-like)</h1>
-<div id="player-controls">
-    <button id="playButton">Play</button>
-    <button id="stopButton">Stop</button>
 </div>
-<div id="score"></div>
-<script>
-    const {
-        Accidental,
-        Annotation,
-        Beam,
-        Dot,
-        EasyScore,
-        Factory,
-        Formatter,
-        Fraction,
-        Renderer,
-        Stave,
-        StaveNote,
-        Stem,
-        Tuplet,
-        Voice,
-        VexFlow,
-        parseSVG,
-        renderVexFlow,
-    } = Vex;  // Destructuring for easier use
-    // --- WebAudioFont Setup for Piano Sound ---
-    const AudioContextFunc = window.AudioContext || window.webkitAudioContext;
-    const audioContext = new AudioContextFunc();
-    const player = new WebAudioFontPlayer();
-    player.loader.decodeAfterLoading(audioContext, '_tone_0000_JCLive_sf2_file'); // Load piano sound
-    // ------- VexFlow Rendering --------
-    const factory = new Factory({
-      renderer: { elementId: 'score', width: 750, height: 450 } // Adjusted for A4 and multiple staves
     });
-    const score = factory.EasyScore();
-    // Function to create a dotted note
-    function dottedNote(note, duration) {
-        return score.notes(note + duration)[0].addDotToAll();
-    }
-    // Helper function to create rests
-    function createRest(duration) {
-        return new StaveNote({ keys: ["b/4"], duration: duration + "r" });  // b/4 as placeholder
     }
-    // --- Fugue Subject and Countersubject (Modified for more "Little Fugue" feel) ---
-    const subject = [
-        "a/4/16", "c/5/16", "b/4/16", "a/4/16", "g/4/8", "f/4/16", "e/4/16",
-        "f/4/8", "g/4/16", "a/4/16", "b/4/8", "c/5/8", "a/4/8"
-    ];
-    const countersubject = [
-        "e/4/8", "f/4/16", "g/4/16",  "a/4/8", "b/4/16","c/5/16",
-        "d/5/8", "c/5/16", "b/4/16",  "a/4/8","g/4/8", "f/4/8","e/4/8",
-    ];
-    // --- Voices (Expanded for more musical interest and A4 layout) ---
-    // Voice 1 (Soprano) - Page 1
-	const voice1NotesPage1 = [
-		...subject.map(n => n),
-		...Array(12).fill("b/4/8r"), // Rests
-		...countersubject.map(n=>n.replace('4', '5')),  //Adjust Octave
-		...Array(16).fill("b/4/8r"), // Rests
-		...subject.map(n => n.replace('4', '5')),//octave up
-		...Array(16).fill("b/4/8r"), // Rests
-		"a/5/4.",
-	];
-    // Voice 2 (Alto) - Page 1
-	const voice2NotesPage1 = [
-		...Array(16).fill("b/4/8r"),  // Rests
-		...subject.map(n=>n.replace('a', 'e').replace('4','4')),
-		...Array(8).fill("b/4/8r"), // Rests
-		...countersubject.map(n=>n),  // Countersubject
-		...Array(16).fill("b/4/8r"), // Rests
-		"e/4/4."
-	];
-     // Voice 3 (Tenor) - Page 1
-    const voice3NotesPage1 = [
-		...Array(16).fill("b/4/8r"),
-        ...Array(16).fill("b/4/8r"),
-		...Array(8).fill("b/4/8r"),
-		...subject.map(n => n.replace('4', '4').replace('5', '4')),//octave up
-		...Array(16).fill("b/4/8r"),
-		"c/4/4", ...Array(2).fill("b/4/8r")
-	];
-    // Voice 4 (Bass) - Page 1
-      const voice4NotesPage1 = [
-        ...Array(16).fill("b/4/8r"),
-        ...Array(8).fill("b/4/8r"),
-        ...subject.map(n => n.replace('4', '3').replace('5','4').replace('a/','e/')),
-         ...Array(16).fill("b/4/8r"),
-		"a/2/4.", ...Array(10).fill("b/4/8r")
-    ];
-		const allNotes = [voice1NotesPage1, voice2NotesPage1, voice3NotesPage1, voice4NotesPage1];
-		let beamedNotes = [];
-		for (const voiceNotes of allNotes) {
-			let currentBeamGroup = [];
-			let beamedVoiceNotes = [];
-			for (const note of voiceNotes) {
-				const duration = note.split('/').pop();  // '8', '16', etc.
-				if (duration === '8' || duration === '16') {
-					currentBeamGroup.push(score.notes(note)[0]);
-				} else {
-					if (currentBeamGroup.length > 0) {
-						beamedVoiceNotes.push(new Beam(currentBeamGroup));
-						currentBeamGroup = [];
-					}
-					beamedVoiceNotes.push(score.notes(note)[0]); // Add the non-beamed note
-				}
-			}
-			// Handle any remaining notes in the beam group
-			if (currentBeamGroup.length > 0) {
-				beamedVoiceNotes.push(new Beam(currentBeamGroup));
-			}
-			beamedNotes.push(beamedVoiceNotes);
-		}
-    // Create Voices
-    const voicesPage1 = [
-      new Voice({ num_beats: 16, beat_value: 4 }).addTickables(beamedNotes[0]), //Soprano
-      new Voice({ num_beats: 16, beat_value: 4 }).addTickables(beamedNotes[1]),  //Alto
-      new Voice({ num_beats: 16, beat_value: 4 }).addTickables(beamedNotes[2]), // Tenor
-      new Voice({ num_beats: 16, beat_value: 4 }).addTickables(beamedNotes[3]), // Bass
-    ];
-    // -------- Staves - Page 1 ----------
-    const stave1Page1 = new Stave(10, 0, 700).addClef('treble').addTimeSignature('4/4').addKeySignature('Am'); //Soprano
-    const stave2Page1 = new Stave(10, 110, 700).addClef('treble').addTimeSignature('4/4').addKeySignature('Am');//Alto
-    const stave3Page1 = new Stave(10, 220, 700).addClef('bass').addTimeSignature('4/4').addKeySignature('Am'); //Tenor
-    const stave4Page1 = new Stave(10, 330, 700).addClef('bass').addTimeSignature('4/4').addKeySignature('Am'); // Bass
-    // Draw Page 1
-    factory.getContext().scale(1,1); // Adjust scaling if needed
-    factory.getContext().setFont("Arial", 10);
-    const formatterPage1 = new Formatter().joinVoices(voicesPage1).format(voicesPage1, 650);
-    voicesPage1.forEach((v, i) => v.draw(factory.getContext(), [stave1Page1, stave2Page1, stave3Page1, stave4Page1][i]));
-	stave1Page1.setContext(factory.getContext()).draw();
-    stave2Page1.setContext(factory.getContext()).draw();
-    stave3Page1.setContext(factory.getContext()).draw();
-    stave4Page1.setContext(factory.getContext()).draw();
-    // -------- MIDI Data Generation --------
-    function generateMidiData() {
-        const headerChunk = [
-            0x4d, 0x54, 0x68, 0x64, // "MThd"
-            0x00, 0x00, 0x00, 0x06, // Header length (6 bytes)
-            0x00, 0x01,             // Format 1 (multiple tracks)
-            0x00, 0x04,             // Number of tracks (4 voices)
-            0x00, 0x60              // Ticks per quarter note (96) - Adjust if needed
-        ];
-        function createTrackChunk(notes) {
-            let trackData = [];
-            let currentTime = 0;
-            for (const noteStr of notes) {
-                const [note, duration] = noteStr.split('/');
-				const isRest = noteStr.includes('r');
-				// Calculate duration in ticks
-				let durationTicks;
-				switch (duration) {
-				    case '2.':
-						durationTicks = 96 * 3;     // Dotted Half note (3 beats)
-						break;
-					case '2':
-						durationTicks = 96 * 2; // Half
-						break;
-					case '4':
-						durationTicks = 96;       // Quarter note
-						break;
-                    case '4.':
-                        durationTicks = 96*1.5;
-                        break;
-					case '8':
-						durationTicks = 48;       // Eighth note
-						break;
-					case '16':
-						durationTicks = 24;       // Sixteenth note
-						break;
-                    case '4r':
-                        durationTicks = 96;
-                        break;
-                    case '8r':
-                        durationTicks = 48;
-                        break;
-                    case '16r':
-                        durationTicks = 24;
-                         break;
-					default:
-						durationTicks = 0; // Should not happen, but handle for safety
-				}
-                if (!isRest) {
-                    const midiNote = noteNameToMidi(note);
-                    // Note On event
-                    trackData.push(...deltaEncode(currentTime));
-                    trackData.push(0x90);       // Note On, channel 1
-                    trackData.push(midiNote);
-                    trackData.push(0x64);       // Medium Velocity (100) - Adjust as needed
-                    // Note Off event
-                    trackData.push(...deltaEncode(durationTicks));
-                    trackData.push(0x80);       // Note Off, channel 1
-                    trackData.push(midiNote);
-                    trackData.push(0x00);       // Release velocity
-                     currentTime = 0; // Reset current time for next delta
-                } else {
-                    currentTime += durationTicks; // Increment time for rests
                 }
             }
-            // End of track
-            trackData.push(0x00, 0xFF, 0x2F, 0x00);
-            const trackHeader = [
-                0x4d, 0x54, 0x72, 0x6b,
-                ...intToBytes(trackData.length, 4)
-            ];
-            return [...trackHeader, ...trackData];
-        }
-        const trackChunks = [voice1NotesPage1, voice2NotesPage1, voice3NotesPage1, voice4NotesPage1].map(createTrackChunk);
-        const midiData = [...headerChunk, ...trackChunks.flat()];
-        return new Uint8Array(midiData);
-    }
-    // Helper functions (same as before, but consolidated)
-    function noteNameToMidi(noteName) {
-			const noteMap = {
-				'c': 0, 'c#': 1, 'db': 1, 'd': 2, 'd#': 3, 'eb': 3, 'e': 4, 'f': 5,
-				'f#': 6, 'gb': 6, 'g': 7, 'g#': 8, 'ab': 8, 'a': 9, 'a#': 10, 'bb': 10, 'b': 11
-			};
-			const [note, octave] = noteName.split('/');
-			const noteValue = noteMap[note.toLowerCase()];
-			const octaveValue = parseInt(octave, 10);
-			if (noteValue === undefined || isNaN(octaveValue)) {
-				console.error("Invalid note name:", noteName);
-				return 0; // Return a default value (or throw an error)
-			}
-			return (octaveValue + 1) * 12 + noteValue;
-		}
-    function deltaEncode(value) {
-        let bytes = [];
-        let buffer = value & 0x7F;
-        while ((value >>= 7)) {
-            buffer <<= 8;
-            buffer |= ((value & 0x7F) | 0x80);
-        }
-        while (true) {
-            bytes.push(buffer & 0xFF);
-            if (buffer & 0x80) {
-                buffer >>= 8;
-            } else {
-                break;
-            }
-        }
-        return bytes;
-    }
-    function intToBytes(value, numBytes) {
-        const bytes = [];
-        for (let i = 0; i < numBytes; i++) {
-            bytes.unshift((value >> (i * 8)) & 0xFF);
-        }
-        return bytes;
-    }
-    // --- MIDI Playback with WebAudioFont ---
-    const midiData = generateMidiData();
-    const midiBase64 = btoa(String.fromCharCode.apply(null, midiData));
-    const midiDataUri = "data:audio/midi;base64," + midiBase64;
-    let scheduleAheadTime = 0.1;  // How far ahead to schedule notes (in seconds)
-    let currentMidiTime = 0;   // Keep track of the current time in the MIDI sequence
-    let midiPlaybackInterval;
-    let startTime = 0;
-document.getElementById('playButton').addEventListener('click', function() {
-    if (midiPlaybackInterval) {
-        return; // Prevent starting multiple playbacks
-    }
-    // Reset playback variables
-    currentMidiTime = 0;
-    startTime = audioContext.currentTime;
-    // Create a buffer from the MIDI data
-    const buffer = new Uint8Array(midiData).buffer;
-    const midiFile = MidiParser.parse(buffer);
-    playMidiFile(midiFile);
-});
-document.getElementById('stopButton').addEventListener('click', function() {
-	clearInterval(midiPlaybackInterval);
-    midiPlaybackInterval = null;
-	player.cancelQueue(audioContext);
-});
 function playMidiFile(midiFile) {
     midiPlaybackInterval = setInterval(() => {
         const lookaheadEnd = audioContext.currentTime - startTime + scheduleAheadTime;
-        // Iterate through tracks and schedule notes within the lookahead window
-        for (const track of midiFile.track) {
             for (const event of track.event) {
                 if (event.deltaTime > 0) {
-                    currentMidiTime += ticksToSeconds(event.deltaTime, midiFile.timeDivision); //update first!
                 }
                 if (currentMidiTime <= lookaheadEnd) {
-                    if (event.type === 9) { // Note On
-                       player.queueWaveTable(audioContext, audioContext.destination
-                       , _tone_0000_JCLive_sf2_file, startTime + currentMidiTime, event.data[0], event.data[1]/127, 0.5 );
-                    }
-                    if(event.type === 8) { //Note off, we won't use it.
-                        //player.noteOff(audioContext, event.data[0]);
                     }
                 } else {
-                    // Notes beyond lookahead are handled in the next interval
-                    break;
                 }
             }
         }
-    }, scheduleAheadTime * 1000 / 2); // Run slightly more frequently than scheduleAheadTime
-}
-function ticksToSeconds(ticks, timeDivision) {
-     // Assuming tempo is 120 bpm (beats per minute)
-    const beatsPerMinute = 120;
-    const ticksPerBeat = timeDivision;
-    const secondsPerBeat = 60 / beatsPerMinute;
-    const secondsPerTick = secondsPerBeat / ticksPerBeat;
-    return ticks * secondsPerTick;
 }
 </script>
 </body>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>AI FUGUE by Sami Halawa</title>
+    <!-- Optimized CDN Links -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow-debug.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/webAudioFontPlayer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/data/0000_JCLive_sf2_file.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/midi-parser.js"></script>
     <style>
+        body { font-family: sans-serif; }
+        #container { display: flex; flex-direction: column; align-items: center; }
+        #score, #score2, #score3 {
+          width: 750px; margin: 20px auto; background-color: white;
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 25px;
+          page-break-after: always; overflow: visible;
         }
+        #player-controls { text-align: center; margin-bottom: 20px; }
+        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
         @media print {
+            body { margin: 0; padding: 0; width: 100%; }
+            #score, #score2, #score3 { box-shadow: none; width: 100%; margin: 0; padding: 0; page-break-inside: avoid; }
+            #player-controls, button { display: none; }
+            .vf-stavenote { transform: scale(1) !important; }
+            .highlight { fill: black !important; stroke: black !important; }
         }
+        .highlight { fill: blue !important; stroke: blue !important; }
   </style>
 </head>
 <body>
+<div id="container">
+    <h1>AI FUGUE by Sami Halawa</h1>
+    <div id="player-controls">
+        <button id="playButton">Play</button>
+        <button id="pauseButton">Pause</button>
+        <button id="stopButton">Stop</button>
+    </div>
+    <div id="score"></div>
+    <div id="score2"></div>
+    <div id="score3"></div>
 </div>
+<script>
+const {
+    Accidental, Beam, Dot, EasyScore, Factory, Formatter,
+    Renderer, Stave, StaveNote, Voice
+} = Vex.Flow;
+// --- WebAudioFont Setup ---
+const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+const player = new WebAudioFontPlayer();
+player.loader.decodeAfterLoading(audioContext, '_tone_0000_JCLive_sf2_file');
+// --- Helper functions ---
+const noteNameToMidi = (noteName) => {
+  const noteMap = {
+      'c': 0, 'c#': 1, 'db': 1, 'd': 2, 'd#': 3, 'eb': 3, 'e': 4, 'f': 5,
+      'f#': 6, 'gb': 6, 'g': 7, 'g#': 8, 'ab': 8, 'a': 9, 'a#': 10, 'bb': 10, 'b': 11
+  };
+  const [note, octave] = noteName.split('/');
+  const noteValue = noteMap[note.toLowerCase()];
+  const octaveValue = parseInt(octave, 10);
+  return (isNaN(noteValue) || isNaN(octaveValue)) ? NaN : (octaveValue + 1) * 12 + noteValue;
+};
+const deltaEncode = (value) => {
+  let bytes = []; let buffer = value & 0x7F;
+  while ((value >>= 7)) { buffer <<= 8; buffer |= ((value & 0x7F) | 0x80); }
+  while (true) { bytes.push(buffer & 0xFF); if (buffer & 0x80) { buffer >>= 8; } else { break; } }
+  return bytes;
+};
+const intToBytes = (value, numBytes) => {
+  const bytes = []; for (let i = 0; i < numBytes; i++) { bytes.unshift((value >> (i * 8)) & 0xFF); }
+  return bytes;
+};
+const ticksToSeconds = (ticks, timeDivision) => (60 / 120) * (ticks / timeDivision);  // Assumes 120 BPM
+const createRest = (duration) => new StaveNote({ keys: ["b/4"], duration: duration + "r" });
+// --- Fugue Data ---
+const subject = [
+    "a/4/16", "c/5/16", "b/4/16", "a/4/16", "g/4/8", "f/4/16", "e/4/16",
+    "f/4/8", "g/4/16", "a/4/16", "b/4/8", "c/5/8", "a/4/8"
+];
+const countersubject = [
+    "e/4/8", "f/4/16", "g/4/16",  "a/4/8", "b/4/16","c/5/16",
+    "d/5/8", "c/5/16", "b/4/16",  "a/4/8","g/4/8", "f/4/8","e/4/8",
+];
+// --- All Notes (Combined, continuous) ---
+const allNotes = [
+  ...subject, ...Array(12).fill("b/4/8r"), ...countersubject.map(n => n.replace('4', '5')), ...Array(16).fill("b/4/8r"),  // Voice 1 - Page 1
+  ...subject.map(n => n.replace('4', '5')), ...Array(16).fill("b/4/8r"), "a/5/4.", ...Array(16).fill("b/4/8r"), //Voice 1 continues
+  ...Array(16).fill("b/4/8r"), ...subject.map(n => n.replace('a', 'e').replace('4', '4')), ...Array(8).fill("b/4/8r"), // Voice 2 - Page 1
+  ...countersubject, ...Array(16).fill("b/4/8r"), "e/4/4.", ...Array(16).fill("b/4/8r"), //Voice 2 continues
+  ...Array(16).fill("b/4/8r"), ...Array(16).fill("b/4/8r"), ...Array(8).fill("b/4/8r"), // Voice 3 - Page 1
+  ...subject.map(n => n.replace('4', '4').replace('5', '4')), ...Array(16).fill("b/4/8r"), "c/4/4", ...Array(2).fill("b/4/8r"), ...Array(16).fill("b/4/8r"),//Voice 3
+  ...Array(16).fill("b/4/8r"), ...Array(8).fill("b/4/8r"), // Voice 4 - Page 1
+  ...subject.map(n => n.replace('4', '3').replace('5', '4').replace('a/', 'e/')), ...Array(16).fill("b/4/8r"), "a/2/4.", ...Array(10).fill("b/4/8r"), //Voice 4
+  ...countersubject.map(n => n.replace('4', '5')), ...Array(8).fill("b/4/8r"),
+  ...Array(16).fill("b/4/8r"), ...subject.map(n => n.replace('4', '5')),  ...Array(8).fill("b/4/4r"), "b/4/4",  ...Array(8).fill("b/4/8r"),//V1 P2
+  ...countersubject, ...Array(12).fill("b/4/8r"), ...subject.map(n => n.replace('4', '4')),
+  ...Array(8).fill("b/4/8r"), ...Array(16).fill("b/4/8r"), ...countersubject.map(n=>n.replace('a','f#').replace('4','4')), ...Array(8).fill("b/4/8r"), //V2 P2
+  ...Array(8).fill("b/4/8r"), ...subject.map(n => n.replace('4', '3').replace('5', '4')),
+    ...Array(16).fill("b/4/8r"), ...Array(8).fill("b/4/8r"), ...countersubject.map(n => n.replace('4', '3').replace('5','4')), ...Array(16).fill("b/4/8r"), "e/3/4.",//V3 P2
+  ...Array(16).fill("b/4/8r"), ...Array(16).fill("b/4/8r"),  ...Array(8).fill("b/4/8r"),
+    ...subject.map(n => n.replace('4', '2').replace('5','3').replace('a/','e/')), ...Array(16).fill("b/4/8r"), ...countersubject.map(n => n.replace('4', '2').replace('5','3')),//V4 P2
+      ...Array(8).fill("b/4/8r"), ...subject.map(n => n.replace('4', '5')), ...Array(8).fill("b/4/8r"), ...countersubject.map(n => n.replace('4', '5')),
+    ...Array(8).fill("b/4/8r"), ...subject.map(n => n.replace('4', '5')),  ...Array(16).fill("b/4/4r"), "a/5/2.", //V1 P3
+      ...Array(16).fill("b/4/8r"),  ...countersubject, ...Array(16).fill("b/4/8r"), ...subject.map(n => n.replace('4', '4')),
+    ...Array(8).fill("b/4/8r"), "e/4/2.",//V2 P3
+ ...countersubject.map(n => n.replace('4', '3').replace('5','4')), ...Array(16).fill("b/4/8r"), ...Array(8).fill("b/4/8r"), ...subject.map(n => n.replace('4', '3').replace('5', '4')),
+    ...Array(16).fill("b/4/8r"), "c/4/2.", //V3 P3
+     ...Array(8).fill("b/4/8r"),
+    ...subject.map(n => n.replace('4', '2').replace('5','3').replace('a/','e/')), ...Array(16).fill("b/4/8r"), ...Array(16).fill("b/4/8r"),  ...countersubject.map(n => n.replace('4', '2').replace('5','3')), "a/2/2." // V4 P3
+];
+// --- MIDI Data Generation (Continuous) ---
+function generateMidiData() {
+    const headerChunk = [0x4d, 0x54, 0x68, 0x64, 0x00, 0x00, 0x00, 0x06, 0x00, 0x01, 0x00, 0x01, 0x00, 0x60]; // Single track
+    let trackData = [];
+    let currentTime = 0;
+    for (const noteStr of allNotes) {
+        const [note, duration] = noteStr.split('/');
+        const isRest = noteStr.includes('r');
+        const durationTicks = {
+            '2.': 96 * 3, '2': 96 * 2, '4': 96, '4.': 96 * 1.5, '8': 48, '16': 24,
+            '4r': 96, '8r': 48, '16r': 24
+        }[duration] || 0;
+        if (!isRest) {
+            const midiNote = noteNameToMidi(note);
+            trackData.push(...deltaEncode(currentTime), 0x90, midiNote, 0x64); // Note On
+            trackData.push(...deltaEncode(durationTicks), 0x80, midiNote, 0x00); // Note Off
+            currentTime = 0;
+        } else {
+            currentTime += durationTicks;
+        }
+    }
+    trackData.push(0x00, 0xFF, 0x2F, 0x00);  // End of track
+    const trackHeader = [0x4d, 0x54, 0x72, 0x6b, ...intToBytes(trackData.length, 4)];
+    return new Uint8Array([...headerChunk, ...trackHeader, ...trackData]);
+}
+const midiData = generateMidiData();
+const midiBase64 = btoa(String.fromCharCode.apply(null, midiData));
+const midiDataUri = "data:audio/midi;base64," + midiBase64;
+// --- Rendering (Continuous Staves) ---
+function renderPage(startIndex, numMeasures, pageDivId) {
+    const factory = new Factory({ renderer: { elementId: pageDivId, width: 750, height: 450 } });
+    const score = factory.EasyScore();
+    // Create staves
+    const staves = Array(4).fill(null).map((_, i) => {
+        const stave = new Stave(10, i * 110, 700);
+        if (i < 2) stave.addClef('treble'); else stave.addClef('bass');
+        stave.addTimeSignature('4/4').addKeySignature('Am');
+        return stave;
     });
+    // Create voices
+    const voices = staves.map(() => []);
+    let currentTime = [0, 0, 0, 0]; // Keep track of time for each voice
+    // Process notes and distribute to voices
+    for (let i = startIndex; i < allNotes.length && currentTime[0] < numMeasures * 96 *4 ; i++) {
+        const noteStr = allNotes[i];
+        const [note, duration] = noteStr.split("/");
+        const durationTicks = {
+            '2.': 96 * 3, '2': 96 * 2, '4': 96, '4.': 96 * 1.5, '8': 48, '16': 24,
+            '4r': 96, '8r': 48, '16r': 24
+        }[duration] || 0;
+        // Determine voice based on current time (simplified logic)
+        let voiceIndex = 0;
+        if(currentTime[0] <= currentTime[1]  && currentTime[0] <= currentTime[2] && currentTime[0] <= currentTime[3] ){
+            voiceIndex = 0;
+        } else if (currentTime[1] <= currentTime[2] && currentTime[1] <= currentTime[3]){
+           voiceIndex = 1;
+        }
+        else if(currentTime[2] <= currentTime[3]){
+            voiceIndex = 2;
+        } else {
+           voiceIndex = 3;
+        }
+        voices[voiceIndex].push(noteStr.includes('r') ? createRest(duration) : score.notes(noteStr)[0]);
+        currentTime[voiceIndex] += durationTicks;
     }
+    // Beam notes
+       const beamedVoices = voices.map(voiceNotes => {
+        let currentBeamGroup = [];
+        let beamedVoiceNotes = [];
+        voiceNotes.forEach(note => {
+            if (['8', '16'].includes(note.duration)) {
+                currentBeamGroup.push(note);
+            } else {
+                if (currentBeamGroup.length > 0) {
+                    beamedVoiceNotes.push(new Beam(currentBeamGroup));
+                    currentBeamGroup = [];
                 }
+                beamedVoiceNotes.push(note);
             }
+        });
+        if (currentBeamGroup.length > 0) {
+          beamedVoiceNotes.push(new Beam(currentBeamGroup));
+        }
+        return beamedVoiceNotes
+    });
+    // Create VexFlow Voices and format
+    const vfVoices = beamedVoices.map((notes, i) => new Voice({ num_beats: numMeasures*4, beat_value: 4 }).addTickables(notes));
+    const formatter = new Formatter().joinVoices(vfVoices).format(vfVoices, 650);
+    // Draw
+    factory.getContext().scale(1, 1).setFont("Arial", 10);
+    vfVoices.forEach((voice, i) => voice.draw(factory.getContext(), staves[i]));
+    staves.forEach(stave => stave.setContext(factory.getContext()).draw());
+    return voices; // Return created voices for highlighting
+}
+const voicesPage1 = renderPage(0, 16, 'score');             // First 16 measures
+const voicesPage2 = renderPage(240, 16, 'score2');  // Next 16
+const voicesPage3 = renderPage(480, 16, 'score3');  // Last ones
+// --- Note Highlighting and Playback ---
+let scheduleAheadTime = 0.1;
+let currentMidiTime = 0;
+let midiPlaybackInterval;
+let startTime = 0;
+let paused = false;
+let highlightedNotes = [];
+function clearHighlightedNotes() {
+  highlightedNotes.forEach(note => note.setStyle({ fill: 'black', stroke: 'black' }));
+  highlightedNotes = [];
+}
+function highlightNote(note) {
+  if (note && note.attrs) {
+    note.setStyle({ fill: 'blue', stroke: 'blue' });
+    highlightedNotes.push(note);
+  }
+}
+function getVexflowNote(midiNote, currentMidiTime) {
+  let accumulatedTime = 0;
+  const timeDivision = 96;
+    let currentTime = [0,0,0,0];
+  for (let i = 0; i < allNotes.length; i++) {
+    const noteStr = allNotes[i];
+    const [note, duration] = noteStr.split('/');
+    const isRest = noteStr.includes('r');
+    const durationTicks = {
+      '2.': 96 * 3, '2': 96 * 2, '4': 96, '4.': 96 * 1.5, '8': 48, '16': 24,
+      '4r': 96, '8r': 48, '16r': 24
+    }[duration] || 0;
+    if (!isRest) {
+      const currentNoteMidi = noteNameToMidi(note);
+      if (currentNoteMidi === midiNote && Math.floor(accumulatedTime) === Math.floor(currentMidiTime * timeDivision)) {
+        // Determine the voice and page.
+        let voicesToCheck = null;
+        if(i < 240){ // First page
+            voicesToCheck = voicesPage1;
+        }
+        else if (i < 480 ){ //Second page
+            voicesToCheck = voicesPage2;
+        } else { //Last Page
+           voicesToCheck = voicesPage3
+        }
+           let voiceIndex = 0;
+            if(currentTime[0] <= currentTime[1]  && currentTime[0] <= currentTime[2] && currentTime[0] <= currentTime[3] ){
+                voiceIndex = 0;
+            } else if (currentTime[1] <= currentTime[2] && currentTime[1] <= currentTime[3]){
+               voiceIndex = 1;
+            }
+            else if(currentTime[2] <= currentTime[3]){
+                voiceIndex = 2;
+            } else {
+               voiceIndex = 3;
+            }
+        // Find the VexFlow note within the correct voice
+        if (voicesToCheck && voicesToCheck[voiceIndex]) {
+          let noteIdx = 0;
+          for(let j = 0; j <= i; j++){ //Iterate notes until current note
+             if(!allNotes[j].includes("r")) noteIdx++; //Increase counter if it is nota rest
+          }
+          noteIdx--; //Compensate the index to start at 0
+          const vexNote = voicesToCheck[voiceIndex][noteIdx]
+          if(vexNote){
+            return vexNote
+          }
+        }
+        return null; // Note not found in expected voice
+      }
+    }
+    accumulatedTime += durationTicks;
+      if(currentTime[0] <= currentTime[1]  && currentTime[0] <= currentTime[2] && currentTime[0] <= currentTime[3] ){
+            voiceIndex = 0;
+        } else if (currentTime[1] <= currentTime[2] && currentTime[1] <= currentTime[3]){
+           voiceIndex = 1;
+        }
+        else if(currentTime[2] <= currentTime[3]){
+            voiceIndex = 2;
+        } else {
+           voiceIndex = 3;
+        }
+      currentTime[voiceIndex] += durationTicks
+  }
+  return null; // Note not found
+}
 function playMidiFile(midiFile) {
     midiPlaybackInterval = setInterval(() => {
+        if (paused) return;
         const lookaheadEnd = audioContext.currentTime - startTime + scheduleAheadTime;
+        let anyNotesPlayed = false;
+        for (const track of midiFile.track) { //Should be only 1 track
             for (const event of track.event) {
                 if (event.deltaTime > 0) {
+                    currentMidiTime += ticksToSeconds(event.deltaTime, midiFile.timeDivision);
                 }
                 if (currentMidiTime <= lookaheadEnd) {
+                    if (event.type === 9) { //Note on
+                        anyNotesPlayed = true; //To avoid clearing notes when there are only rests at the start
+                        player.queueWaveTable(audioContext, audioContext.destination, _tone_0000_JCLive_sf2_file, startTime + currentMidiTime, event.data[0], event.data[1] / 127, 0.5);
+                        const vexNote = getVexflowNote(event.data[0], currentMidiTime);
+                        if (vexNote) {
+                            highlightNote(vexNote);
+                        }
+                    } else if (event.type === 8){
+                       //For getVexFlowNote purpose, we are going to simulate it like a note on event
+                        const vexNote = getVexflowNote(event.data[0], currentMidiTime);
+                        if(vexNote) clearHighlightedNotes();
                     }
                 } else {
+                    break; // Exit inner loop, move to the next interval
                 }
             }
         }
+    }, scheduleAheadTime * 1000 /2);
 }
+// --- Event Listeners ---
+document.getElementById('playButton').addEventListener('click', () => {
+    if (!midiPlaybackInterval) { // Start if not already playing
+        currentMidiTime = 0;
+        startTime = audioContext.currentTime;
+        paused = false;
+        const buffer = new Uint8Array(midiData).buffer;
+        const midiFile = MidiParser.parse(buffer);
+        playMidiFile(midiFile);
+    } else if (paused) { // Resume if paused
+        paused = false;
+        startTime = audioContext.currentTime - currentMidiTime;  // Adjust start time
+    }
+});
+document.getElementById('pauseButton').addEventListener('click', () => {
+    paused = true;
+    player.cancelQueue(audioContext); // Important: Cancel scheduled notes
+    clearHighlightedNotes()
+});
+document.getElementById('stopButton').addEventListener('click', () => {
+    clearInterval(midiPlaybackInterval);
+    midiPlaybackInterval = null;
+    currentMidiTime = 0;
+    paused = false;
+    player.cancelQueue(audioContext);
+    clearHighlightedNotes();
+});
 </script>
 </body>