Spaces:

luigi12345
/

Automusic

Running

App Files Files Community

luigi12345 commited on 2 days ago

Commit

9440d54

verified ·

1 Parent(s): 173b7fd

Update index.html

Browse files

Files changed (1) hide show

index.html +165 -370

index.html CHANGED Viewed

@@ -1,401 +1,196 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>AI FUGUE by Sami Halawa</title>
-    <!-- Optimized CDN Links -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vexflow@4.2.2/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>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>AI Fugue - Audio Playback</title>
+    <!-- Use Tone.js for high-quality audio and scheduling -->
+    <script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script>
+    <!-- Use midi-parser-js to process MIDI data -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/midi-parser.js"></script>
     <style>
+        body {
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
+        #player-controls { margin-bottom: 20px; }
         button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
+    </style>
 </head>
 <body>
+    <h1>AI Fugue - Audio Playback</h1>
     <div id="player-controls">
         <button id="playButton">Play</button>
         <button id="pauseButton">Pause</button>
         <button id="stopButton">Stop</button>
     </div>
+    <script>
+        // --- 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('/');
+            return noteMap[note.toLowerCase()] + (parseInt(octave, 10) + 1) * 12;
+        };
+        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) => Array.from({ length: numBytes }, (_, i) => (value >> ((numBytes - 1 - i) * 8)) & 0xFF);
+        const ticksToSeconds = (ticks) => (60 / 120) * (ticks / 96); // 120 BPM, 96 ticks/quarter
+        // --- 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",
+        ];
+        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 ---
+        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);
+            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;
+        // --- Tone.js Setup ---
+        const sampler = new Tone.Sampler({
+            urls: {
+                "A3": "A3.mp3",
+                "A4": "A4.mp3",
+                "C3": "C3.mp3",
+                "C4": "C4.mp3",
+                "C5": "C5.mp3",
+                "D#3": "Ds3.mp3",
+                "D#4": "Ds4.mp3",
+                "F#3": "Fs3.mp3",
+                "F#4": "Fs4.mp3",
+            },
+            baseUrl: "https://tonejs.github.io/audio/salamander/", // Sample files
+            release: 1,  // Adjust release time as needed
+        }).toDestination();
+        // --- Playback State ---
+        let playbackStartTime = 0;
+        let isPlaying = false;
+        let midiEvents;  // Store parsed MIDI events
+        // --- Scheduling Function ---
+        function scheduleNotes() {
+            if (!midiEvents) return;
+            let currentTime = Tone.now() - playbackStartTime;
+            for (const event of midiEvents) {
+                const eventTime = ticksToSeconds(event.time);
+                if (eventTime >= currentTime) {
+                    if (event.type === 9) { // Note On
+                        sampler.triggerAttack(Tone.Midi(event.data[0]).toNote(), eventTime, event.data[1] / 127); // Schedule attack
+                    } else if (event.type === 8) { // Note Off
+                       sampler.triggerRelease(Tone.Midi(event.data[0]).toNote(), eventTime); // Schedule release
+                    }
+                }
             }
         }
+        // --- Event Listeners ---
+        document.getElementById('playButton').addEventListener('click', async () => {
+            if (!isPlaying) {
+                await Tone.start(); // Ensure audio context is started
+                // Parse MIDI data *once* and store events
+                const buffer = new Uint8Array(midiData).buffer;
+                const midiFile = MidiParser.parse(buffer);
+                midiEvents = [];
+                let accumulatedTime = 0;
+                for (const track of midiFile.track) {
+                    for(const event of track.event) {
+                      if (event.deltaTime > 0) {
+                        accumulatedTime += event.deltaTime;
+                      }
+                      event.time = accumulatedTime
+                      midiEvents.push(event); //Add time information to be scheduled
                     }
                 }
+                playbackStartTime = Tone.now(); // Reset start time
+                isPlaying = true;
+                scheduleNotes(); // Initial scheduling
+                Tone.Transport.scheduleRepeat(scheduleNotes, 0.1); // Reschedule every 100ms
+                Tone.Transport.start(playbackStartTime);
+            } else {
+                Tone.Transport.start(); // Restart if already playing (but paused)
             }
+        });
+        document.getElementById('pauseButton').addEventListener('click', () => {
+            Tone.Transport.pause();
+        });
+        document.getElementById('stopButton').addEventListener('click', () => {
+            Tone.Transport.stop();
+            isPlaying = false;
+            playbackStartTime = 0;
+            Tone.Transport.cancel();  // Clear all scheduled events
+        });
+    </script>
 </body>
 </html>