npm - @karaplay/file-coder - Versions diffs - 1.5.4 → 1.5.6 - Mend

@karaplay/file-coder 1.5.4 → 1.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/EMK_REFERENCE_DATA.json +110 -188
package/PLAYBACK_SPEED_FIX.md +223 -0
package/README.md +25 -0
package/RELEASE_v1.5.5.md +217 -0
package/SONG_LIST.txt +334 -251
package/TEST_DEMO.md +186 -0
package/VERIFICATION_RESULT.md +116 -0
package/debug-lyric-timing.js +219 -0
package/debug-output.txt +2962 -0
package/demo-client.html +6 -1
package/demo-server.js +92 -4
package/demo-simple.html +367 -71
package/dist/emk/client-decoder.js +56 -0
package/dist/emk/server-decode.js +70 -0
package/dist/ncntokar.js +15 -17
package/download-soundfonts.js +108 -0
package/full-debug-output.txt +2971 -0
package/full-debug-timing.js +256 -0
package/package.json +4 -2
package/restart-demo.js +105 -0
package/songs/soundfonts/GeneralUserGS.sf3 +0 -0
package/start-demo.sh +12 -0
package/stop-demo.js +84 -0
package/temp/convert-result.json +1 -0
package/temp/debug-test.kar +0 -0
package/temp/kar-data.txt +1 -0
package/temp/kar-data2.txt +1 -0
package/temp/kar-test.txt +1 -0
package/test-browser-thai.html +88 -0
package/test-kar-timing.js +249 -0
package/test-playback-speed.js +133 -0
package/verify-all-songs-duration.js +285 -0

package/demo-simple.html CHANGED Viewed

@@ -140,6 +140,30 @@
       background: #dc3545;
     }
+    .convert-btn {
+      background: #667eea;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.3s;
+    }
+    .convert-btn:hover:not(:disabled) {
+      background: #5568d3;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+    }
+    .convert-btn:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
     .player-container {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       border-radius: 12px;
@@ -150,16 +174,50 @@
     .lyrics-display {
       text-align: center;
-      font-size: 48px;
+      font-size: 42px;
       font-weight: bold;
-      line-height: 1.4;
+      line-height: 1.5;
       min-height: 150px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
-      text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+      text-shadow: 3px 3px 10px rgba(0,0,0,0.5);
       margin-bottom: 20px;
+      padding: 30px;
+      transition: all 0.4s ease;
+    }
+    .lyrics-display.highlight {
+      transform: scale(1.05);
+    }
+    .lyric-line {
+      width: 100%;
+      padding: 15px;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      animation: fadeIn 0.4s ease-in;
+    }
+    .lyric-line.active {
+      font-size: 56px;
+      color: #ffeb3b;
+      text-shadow:
+        0 0 20px rgba(255,235,59,0.9),
+        0 0 40px rgba(255,235,59,0.6),
+        3px 3px 10px rgba(0,0,0,0.8);
+      font-weight: 900;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
     .info-panel {
@@ -293,6 +351,10 @@
       100% { transform: rotate(360deg); }
     }
   </style>
+  <!-- MIDI Player with Soundfont Support -->
+  <script src="https://cdn.jsdelivr.net/npm/tone@14.8.49/build/Tone.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/soundfont-player@0.12.0/dist/soundfont-player.min.js"></script>
 </head>
 <body>
   <div class="container">
@@ -303,7 +365,7 @@
         <span class="version">v1.5.0</span>
       </p>
       <p style="margin-top: 10px; color: #666;">
-        ✨ ZXIO Format Duration Fix (1.24x) | MThd Format (4x) | Simple Audio Playback
+        ✨ ZXIO Format Duration Fix (1.24x) | MThd Format (4x) | 🎹 High-Quality Soundfont Audio (GeneralUserGS)
       </p>
     </div>
@@ -387,8 +449,12 @@
         <!-- MIDI Player -->
         <div id="playerContainer" style="display: none; margin-top: 25px;">
-          <h3 style="color: #667eea; margin-bottom: 15px;">🎵 MIDI Player</h3>
+          <h3 style="color: #667eea; margin-bottom: 15px;">🎵 MIDI Player with Soundfont</h3>
           <div class="card" style="padding: 20px;">
+            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 13px;">
+              🎹 <strong>Audio Engine:</strong> High-quality soundfont synthesis (GeneralUserGS)<br>
+              ✨ <strong>Enhancement:</strong> Realistic instrument sounds vs basic oscillators
+            </div>
             <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
               <button id="playBtn" class="convert-btn" style="flex: 0 0 auto; min-width: 100px;">
                 ▶️ Play
@@ -423,6 +489,7 @@
     let convertedKarData = null;
     let emkInfo = null;
     let karInfo = null;
+    let lyricsData = []; // Store lyrics with timing from karaoke-player
     // Load EMK files list
     async function loadFileList() {
@@ -739,25 +806,52 @@
     }
     // =================================================================
-    // SIMPLE MIDI PLAYER (using karaoke-player libs + Web Audio API)
+    // MIDI PLAYER with Soundfont Support (GeneralUserGS.sf3)
     // =================================================================
     let midiPlayer = {
       ac: null,
+      soundfont: null,
       parsedData: null,
       isPlaying: false,
       isPaused: false,
       startTime: 0,
       pausedTime: 0,
-      activeOscillators: {},
+      activeNotes: {},
+      scheduledEvents: [],
       updateInterval: null,
-      totalDuration: 0
+      totalDuration: 0,
+      soundfontLoaded: false
     };
-    function initMidiPlayer() {
+    async function initMidiPlayer() {
       if (!midiPlayer.ac) {
         midiPlayer.ac = new (window.AudioContext || window.webkitAudioContext)();
       }
-      document.getElementById('playerStatus').innerHTML = '✅ Ready to play!';
+      // Load soundfont if not loaded
+      if (!midiPlayer.soundfontLoaded) {
+        try {
+          document.getElementById('playerStatus').innerHTML = '⏳ Loading soundfont (Piano)...';
+          // Use Soundfont.instrument to load piano
+          midiPlayer.soundfont = await Soundfont.instrument(midiPlayer.ac, 'acoustic_grand_piano', {
+            soundfont: 'FluidR3_GM',
+            format: 'mp3',
+            nameToUrl: (name, soundfont, format) => {
+              return `https://gleitz.github.io/midi-js-soundfonts/${soundfont}/${name}-${format}.js`;
+            }
+          });
+          midiPlayer.soundfontLoaded = true;
+          document.getElementById('playerStatus').innerHTML = '✅ Soundfont loaded! Ready to play with high-quality audio.';
+        } catch (error) {
+          console.error('Soundfont load error:', error);
+          document.getElementById('playerStatus').innerHTML = '⚠️ Using basic audio (soundfont failed to load)';
+          // Will fallback to basic oscillators
+        }
+      } else {
+        document.getElementById('playerStatus').innerHTML = '✅ Ready to play!';
+      }
     }
     async function parseMidiData(base64Data) {
@@ -777,7 +871,38 @@
           throw new Error(data.error || 'Failed to parse MIDI');
         }
-        document.getElementById('playerStatus').innerHTML = '✅ MIDI parsed!';
+        // Store lyrics data
+        lyricsData = data.lyrics || [];
+        console.log('📝 Lyrics loaded:', lyricsData.length, 'lines');
+        // Debug: Detailed timing table for ALL lyrics
+        if (lyricsData.length > 0) {
+          console.log('\n' + '='.repeat(80));
+          console.log('📊 CLIENT-SIDE LYRIC TIMING (received from server)');
+          console.log('='.repeat(80));
+          console.log('Line | Start Time | End Time   | Duration | Text');
+          console.log('-----|------------|------------|----------|' + '-'.repeat(40));
+          for (let i = 0; i < lyricsData.length; i++) {
+            const lyric = lyricsData[i];
+            const startTime = (lyric.time / 1000).toFixed(3);
+            // Calculate end time
+            const nextLyric = lyricsData[i + 1];
+            const endTime = nextLyric ? (nextLyric.time / 1000).toFixed(3) : (lyric.time / 1000 + 2).toFixed(3);
+            const duration = (parseFloat(endTime) - parseFloat(startTime)).toFixed(3);
+            const text = lyric.text?.replace(/\n/g, ' ').substring(0, 35) || '';
+            const lineNum = String(i).padStart(4);
+            console.log(`${lineNum} | ${startTime.padStart(10)}s | ${endTime.padStart(10)}s | ${duration.padStart(8)}s | "${text}"`);
+          }
+          console.log('='.repeat(80) + '\n');
+          displayLyrics(0);
+        }
+        document.getElementById('playerStatus').innerHTML = '✅ MIDI parsed! ' + lyricsData.length + ' lyric lines loaded.';
         return data;
       } catch (error) {
         console.error('MIDI parse error:', error);
@@ -785,6 +910,106 @@
       }
     }
+    // Display lyrics at specific index (ONE LINE AT A TIME - like real karaoke)
+    function displayLyrics(index) {
+      const lyricsDisplay = document.getElementById('lyricsDisplay');
+      if (!lyricsData || lyricsData.length === 0) {
+        lyricsDisplay.textContent = '♪ Instrumental ♪';
+        return;
+      }
+      if (index < 0 || index >= lyricsData.length) {
+        lyricsDisplay.textContent = '♪ ♪ ♪';
+        return;
+      }
+      // Show ONLY the current line (one line at a time like real karaoke)
+      const line = lyricsData[index];
+      let text = line.text || '';
+      // Decode TIS-620 Thai text if it contains Latin-1 characters (À-ÿ)
+      if (text && /[\u00C0-\u00FF]/.test(text)) {
+        try {
+          // TIS-620 to Unicode mapping (Thai characters 0xA0-0xFF)
+          const tis620ToUnicode = {
+            0xA0: 0x0E00, 0xA1: 0x0E01, 0xA2: 0x0E02, 0xA3: 0x0E03, 0xA4: 0x0E04, 0xA5: 0x0E05, 0xA6: 0x0E06, 0xA7: 0x0E07,
+            0xA8: 0x0E08, 0xA9: 0x0E09, 0xAA: 0x0E0A, 0xAB: 0x0E0B, 0xAC: 0x0E0C, 0xAD: 0x0E0D, 0xAE: 0x0E0E, 0xAF: 0x0E0F,
+            0xB0: 0x0E10, 0xB1: 0x0E11, 0xB2: 0x0E12, 0xB3: 0x0E13, 0xB4: 0x0E14, 0xB5: 0x0E15, 0xB6: 0x0E16, 0xB7: 0x0E17,
+            0xB8: 0x0E18, 0xB9: 0x0E19, 0xBA: 0x0E1A, 0xBB: 0x0E1B, 0xBC: 0x0E1C, 0xBD: 0x0E1D, 0xBE: 0x0E1E, 0xBF: 0x0E1F,
+            0xC0: 0x0E20, 0xC1: 0x0E21, 0xC2: 0x0E22, 0xC3: 0x0E23, 0xC4: 0x0E24, 0xC5: 0x0E25, 0xC6: 0x0E26, 0xC7: 0x0E27,
+            0xC8: 0x0E28, 0xC9: 0x0E29, 0xCA: 0x0E2A, 0xCB: 0x0E2B, 0xCC: 0x0E2C, 0xCD: 0x0E2D, 0xCE: 0x0E2E, 0xCF: 0x0E2F,
+            0xD0: 0x0E30, 0xD1: 0x0E31, 0xD2: 0x0E32, 0xD3: 0x0E33, 0xD4: 0x0E34, 0xD5: 0x0E35, 0xD6: 0x0E36, 0xD7: 0x0E37,
+            0xD8: 0x0E38, 0xD9: 0x0E39, 0xDA: 0x0E3A, 0xDF: 0x0E3F, 0xE0: 0x0E40, 0xE1: 0x0E41, 0xE2: 0x0E42, 0xE3: 0x0E43,
+            0xE4: 0x0E44, 0xE5: 0x0E45, 0xE6: 0x0E46, 0xE7: 0x0E47, 0xE8: 0x0E48, 0xE9: 0x0E49, 0xEA: 0x0E4A, 0xEB: 0x0E4B,
+            0xEC: 0x0E4C, 0xED: 0x0E4D, 0xEE: 0x0E4E, 0xEF: 0x0E4F, 0xF0: 0x0E50, 0xF1: 0x0E51, 0xF2: 0x0E52, 0xF3: 0x0E53,
+            0xF4: 0x0E54, 0xF5: 0x0E55, 0xF6: 0x0E56, 0xF7: 0x0E57, 0xF8: 0x0E58, 0xF9: 0x0E59, 0xFA: 0x0E5A, 0xFB: 0x0E5B
+          };
+          // Convert each character
+          let decoded = '';
+          for (let i = 0; i < text.length; i++) {
+            const code = text.charCodeAt(i);
+            if (code >= 0xA0 && tis620ToUnicode[code]) {
+              decoded += String.fromCharCode(tis620ToUnicode[code]);
+            } else {
+              decoded += text[i];
+            }
+          }
+          text = decoded;
+        } catch (e) {
+          console.warn('Thai decode failed:', e);
+        }
+      }
+      // Escape HTML
+      const safeText = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      // Display single line with active styling
+      lyricsDisplay.innerHTML = `<div class="lyric-line active">${safeText.trim() || '♪'}</div>`;
+      // Add highlight effect
+      lyricsDisplay.classList.add('highlight');
+      setTimeout(() => lyricsDisplay.classList.remove('highlight'), 300);
+      // Log for debugging
+      console.log(`🎵 Lyric ${index + 1}/${lyricsData.length}: time=${line.time}ms, text="${text.substring(0, 50)}"`);
+    }
+    // Find current lyric index based on time
+    function getCurrentLyricIndex(currentTime) {
+      if (!lyricsData || lyricsData.length === 0) return -1;
+      // currentTime is in seconds from AudioContext
+      // lyrics time is in milliseconds
+      const currentTimeMs = currentTime * 1000;
+      // Don't show any lyrics if we're before the first one
+      if (currentTimeMs < lyricsData[0].time) {
+        return -1;
+      }
+      // Find the lyric that should be currently displayed
+      // Show a lyric from its time until the next lyric starts
+      for (let i = lyricsData.length - 1; i >= 0; i--) {
+        if (currentTimeMs >= lyricsData[i].time) {
+          // Check if we should still show this lyric or move to next
+          // Show each lyric until the next one starts
+          if (i < lyricsData.length - 1) {
+            // If current time is before next lyric, show current
+            if (currentTimeMs < lyricsData[i + 1].time) {
+              return i;
+            }
+          } else {
+            // Last lyric, show it
+            return i;
+          }
+        }
+      }
+      return 0; // Fallback to first lyric
+    }
     // MIDI note to frequency conversion
     function midiNoteToFrequency(note) {
       return 440 * Math.pow(2, (note - 69) / 12);
@@ -803,7 +1028,7 @@
       }
       try {
-        initMidiPlayer();
+        await initMidiPlayer();
         if (!midiPlayer.parsedData) {
           midiPlayer.parsedData = await parseMidiData(convertedKarData);
@@ -826,80 +1051,102 @@
         const totalSeconds = midiPlayer.totalDuration / 1000;
         document.getElementById('totalTime').textContent = formatTime(totalSeconds);
-        console.log('🎵 Player Info:');
+        console.log('\n' + '='.repeat(80));
+        console.log('🎵 PLAYBACK INFO');
+        console.log('='.repeat(80));
         console.log('   Events:', events.length);
-        console.log('   Duration:', totalSeconds.toFixed(2), 'seconds');
-        console.log('   Duration:', formatTime(totalSeconds));
+        console.log('   Duration:', totalSeconds.toFixed(2), 's (', formatTime(totalSeconds), ')');
+        console.log('   Soundfont:', midiPlayer.soundfontLoaded ? '✅ Piano (FluidR3_GM)' : '⚠️ Basic audio');
+        console.log('   Audio Latency Compensation:', (midiPlayer.audioLatency || 0).toFixed(3), 's (', ((midiPlayer.audioLatency || 0) * 1000).toFixed(0), 'ms)');
+        console.log('   First event time:', events[0]?.time, 'ms');
+        console.log('   Last event time:', events[events.length - 1]?.time, 'ms');
+        console.log('='.repeat(80) + '\n');
         // Start playback
         midiPlayer.isPlaying = true;
         midiPlayer.isPaused = false;
         midiPlayer.startTime = midiPlayer.ac.currentTime;
-        midiPlayer.activeOscillators = {};
+        midiPlayer.activeNotes = {};
+        midiPlayer.scheduledEvents = [];
+        // Audio latency compensation (soundfont has some delay)
+        // Reduced latency since cursor scaling is now correct (20x)
+        midiPlayer.audioLatency = 0.25; // 250ms delay for lyrics to match actual sound
         document.getElementById('playBtn').style.display = 'none';
         document.getElementById('pauseBtn').style.display = 'block';
-        document.getElementById('playerStatus').innerHTML = `▶️ Playing... (${events.length} events)`;
+        const audioType = midiPlayer.soundfontLoaded ? 'High-quality soundfont' : 'Basic audio';
+        document.getElementById('playerStatus').innerHTML = `▶️ Playing with ${audioType}... (${events.length} events)`;
-        // Schedule all notes
+        // Schedule all notes using Web Audio API timing (more accurate than setTimeout)
         events.forEach(event => {
-          const scheduleTime = midiPlayer.startTime + (event.time / 1000); // Convert ms to seconds
-          const noteKey = `${event.track}_${event.note}`;
+          // event.time is in milliseconds, convert to seconds
+          const eventTimeSeconds = event.time / 1000;
+          const scheduleTime = midiPlayer.startTime + eventTimeSeconds;
+          const noteKey = `${event.track}_${event.note}_${event.time}`;
           // Note On (type 9 = NOTE_ON)
           if (event.type === 9 && event.velocity > 0) {
-            // Schedule note start
-            setTimeout(() => {
-              if (!midiPlayer.isPlaying) return;
-              try {
-                // Create oscillator
-                const oscillator = midiPlayer.ac.createOscillator();
-                const gainNode = midiPlayer.ac.createGain();
-                oscillator.connect(gainNode);
-                gainNode.connect(midiPlayer.ac.destination);
-                // Set frequency from MIDI note
-                oscillator.frequency.value = midiNoteToFrequency(event.note);
-                oscillator.type = 'sine';
-                // Set volume from velocity
-                gainNode.gain.value = (event.velocity / 127) * 0.3; // Scale down volume
-                // Start oscillator
-                oscillator.start(scheduleTime);
-                // Store for note off
-                midiPlayer.activeOscillators[noteKey] = { oscillator, gainNode, startTime: scheduleTime };
-              } catch (e) {
-                console.error('Note start error:', e);
-              }
-            }, Math.max(0, (event.time / 1000) * 1000));
-          }
-          // Note Off (type 8 = NOTE_OFF or type 9 with velocity 0)
-          if (event.type === 8 || (event.type === 9 && event.velocity === 0)) {
-            // Schedule note stop
-            setTimeout(() => {
+            // Calculate note duration (find matching note off)
+            const noteOffEvent = events.find(e =>
+              e.note === event.note &&
+              e.track === event.track &&
+              e.time > event.time &&
+              (e.type === 8 || (e.type === 9 && e.velocity === 0))
+            );
+            // Duration in seconds
+            const durationSeconds = noteOffEvent ? (noteOffEvent.time - event.time) / 1000 : 0.5;
+            // Use setTimeout with CORRECT timing (milliseconds from now)
+            const delayMs = Math.max(0, eventTimeSeconds * 1000);
+            const timeoutId = setTimeout(() => {
               if (!midiPlayer.isPlaying) return;
               try {
-                const osc = midiPlayer.activeOscillators[noteKey];
-                if (osc) {
-                  // Fade out
-                  osc.gainNode.gain.exponentialRampToValueAtTime(0.01, scheduleTime + 0.1);
-                  osc.oscillator.stop(scheduleTime + 0.1);
-                  delete midiPlayer.activeOscillators[noteKey];
+                if (midiPlayer.soundfont && midiPlayer.soundfontLoaded) {
+                  // Use soundfont for high-quality audio
+                  const midiNote = event.note;
+                  const velocity = event.velocity / 127;
+                  // Play note with soundfont at the correct time
+                  const note = midiPlayer.soundfont.play(midiNote, scheduleTime, {
+                    duration: durationSeconds,
+                    gain: velocity * 0.8 // Adjust volume
+                  });
+                  midiPlayer.activeNotes[noteKey] = note;
+                } else {
+                  // Fallback to basic oscillator with Web Audio scheduling
+                  const oscillator = midiPlayer.ac.createOscillator();
+                  const gainNode = midiPlayer.ac.createGain();
+                  oscillator.connect(gainNode);
+                  gainNode.connect(midiPlayer.ac.destination);
+                  oscillator.frequency.value = midiNoteToFrequency(event.note);
+                  oscillator.type = 'sine';
+                  gainNode.gain.value = (event.velocity / 127) * 0.3;
+                  // Schedule using Web Audio API (more accurate)
+                  oscillator.start(scheduleTime);
+                  oscillator.stop(scheduleTime + durationSeconds);
+                  midiPlayer.activeNotes[noteKey] = { oscillator, gainNode };
                 }
               } catch (e) {
-                console.error('Note stop error:', e);
+                console.error('Note play error:', e);
               }
-            }, Math.max(0, (event.time / 1000) * 1000));
+            }, delayMs);
+            midiPlayer.scheduledEvents.push(timeoutId);
           }
         });
-        // Update progress
+        // Update progress and lyrics
+        let lastLyricIndex = -1;
+        let debugCounter = 0;
         midiPlayer.updateInterval = setInterval(() => {
           if (!midiPlayer.isPlaying) {
             clearInterval(midiPlayer.updateInterval);
@@ -912,6 +1159,30 @@
           const progress = (currentTime / totalSeconds) * 100;
           document.getElementById('progressBar').style.width = Math.min(progress, 100) + '%';
+          // Update lyrics display (check every frame)
+          // Subtract audio latency to delay lyrics to match actual sound
+          const lyricTime = currentTime - (midiPlayer.audioLatency || 0);
+          const currentLyricIndex = getCurrentLyricIndex(lyricTime);
+          // Debug logging every 2 seconds
+          debugCounter++;
+          if (debugCounter % 20 === 0) {
+            const lyricText = lyricsData[currentLyricIndex]?.text?.substring(0, 30) || '(none)';
+            const lyricStartTime = lyricsData[currentLyricIndex]?.time / 1000 || 0;
+            console.log(`⏱️  Playback: ${currentTime.toFixed(2)}s | Lyric Time (adjusted): ${lyricTime.toFixed(2)}s | Index: ${currentLyricIndex}/${lyricsData.length} | Lyric Start: ${lyricStartTime.toFixed(2)}s | "${lyricText}"`);
+          }
+          // Always update if index changed (including -1 for "before first lyric")
+          if (currentLyricIndex !== lastLyricIndex) {
+            if (currentLyricIndex >= 0) {
+              displayLyrics(currentLyricIndex);
+            } else {
+              // Before first lyric, show waiting message
+              document.getElementById('lyricsDisplay').innerHTML = '<div class="lyric-line">♪ ♪ ♪</div>';
+            }
+            lastLyricIndex = currentLyricIndex;
+          }
           if (currentTime >= totalSeconds + 1) {
             stopMidi();
           }
@@ -930,13 +1201,23 @@
       midiPlayer.isPlaying = false;
       midiPlayer.pausedTime = midiPlayer.ac.currentTime - midiPlayer.startTime;
-      // Stop all active oscillators
-      Object.values(midiPlayer.activeOscillators).forEach(osc => {
+      // Stop all active notes
+      Object.values(midiPlayer.activeNotes).forEach(note => {
         try {
-          osc.oscillator.stop();
+          if (note && note.stop) {
+            note.stop();
+          } else if (note && note.oscillator) {
+            note.oscillator.stop();
+          }
         } catch (e) {}
       });
-      midiPlayer.activeOscillators = {};
+      midiPlayer.activeNotes = {};
+      // Clear scheduled events
+      midiPlayer.scheduledEvents.forEach(timeoutId => {
+        clearTimeout(timeoutId);
+      });
+      midiPlayer.scheduledEvents = [];
       document.getElementById('playBtn').style.display = 'block';
       document.getElementById('pauseBtn').style.display = 'none';
@@ -957,13 +1238,23 @@
       midiPlayer.isPaused = false;
       midiPlayer.pausedTime = 0;
-      // Stop all active oscillators
-      Object.values(midiPlayer.activeOscillators).forEach(osc => {
+      // Stop all active notes
+      Object.values(midiPlayer.activeNotes).forEach(note => {
         try {
-          osc.oscillator.stop();
+          if (note && note.stop) {
+            note.stop();
+          } else if (note && note.oscillator) {
+            note.oscillator.stop();
+          }
         } catch (e) {}
       });
-      midiPlayer.activeOscillators = {};
+      midiPlayer.activeNotes = {};
+      // Clear scheduled events
+      midiPlayer.scheduledEvents.forEach(timeoutId => {
+        clearTimeout(timeoutId);
+      });
+      midiPlayer.scheduledEvents = [];
       document.getElementById('playBtn').style.display = 'block';
       document.getElementById('pauseBtn').style.display = 'none';
@@ -971,6 +1262,11 @@
       document.getElementById('progressBar').style.width = '0%';
       document.getElementById('playerStatus').innerHTML = '⏹️ Stopped';
+      // Reset lyrics to first line
+      if (lyricsData && lyricsData.length > 0) {
+        displayLyrics(0);
+      }
       if (midiPlayer.updateInterval) {
         clearInterval(midiPlayer.updateInterval);
       }

package/dist/emk/client-decoder.js CHANGED Viewed

@@ -33,6 +33,57 @@ function looksLikeText(buf) {
     }
     return true;
 }
+/**
+ * Reconstruct MIDI file from headerless format (browser version)
+ * Identical to server version but works in browser environment
+ */
+function reconstructMidiFromTracks(data) {
+    const customHeaderLength = 12;
+    let format = 1;
+    let ticksPerBeat = 96;
+    if (data.length >= customHeaderLength) {
+        try {
+            const possibleFormat = data.readUInt16BE(8);
+            const possiblePPQ = data.readUInt16BE(10);
+            if (possibleFormat <= 2 && possiblePPQ >= 24 && possiblePPQ <= 960) {
+                format = possibleFormat;
+                ticksPerBeat = possiblePPQ;
+            }
+        }
+        catch (err) {
+            // Use defaults
+        }
+    }
+    const trackData = [];
+    let offset = 0;
+    while (offset < data.length - 4) {
+        const signature = data.toString('ascii', offset, offset + 4);
+        if (signature === 'MTrk') {
+            const trackLength = data.readUInt32BE(offset + 4);
+            const trackEnd = offset + 8 + trackLength;
+            if (trackEnd <= data.length) {
+                trackData.push(data.subarray(offset, trackEnd));
+                offset = trackEnd;
+            }
+            else {
+                break;
+            }
+        }
+        else {
+            offset++;
+        }
+    }
+    if (trackData.length === 0) {
+        throw new Error('No MTrk blocks found in headerless MIDI data');
+    }
+    const midiHeader = Buffer.alloc(14);
+    midiHeader.write('MThd', 0, 'ascii');
+    midiHeader.writeUInt32BE(6, 4);
+    midiHeader.writeUInt16BE(format, 8);
+    midiHeader.writeUInt16BE(trackData.length, 10);
+    midiHeader.writeUInt16BE(ticksPerBeat, 12);
+    return Buffer.concat([midiHeader, ...trackData]);
+}
 /**
  * Convert custom "zxio" MIDI format to standard MIDI format
  * Same as server version but works in browser environment
@@ -117,6 +168,11 @@ function decodeEmk(fileBuffer) {
             result.midi = convertZxioToMidi(inflated);
             result.isZxioFormat = true; // Mark as zxio format for special handling
         }
+        else if (inflated.indexOf('MTrk') >= 0 && inflated.indexOf('MThd') === -1) {
+            // Handle custom format with MTrk blocks but no MThd header (e.g., files starting with "OOn,")
+            result.midi = reconstructMidiFromTracks(inflated);
+            result.isZxioFormat = false; // Not zxio, but similar custom format
+        }
         else if (looksLikeText(inflated)) {
             if (!result.lyric) {
                 result.lyric = inflated;