@karaplay/file-coder 1.5.4 → 1.5.6

package/demo-client.html

@@ -464,8 +464,13 @@
     </div>
   </div>
   
+  <!-- Load 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/@tonejs/midi@2.0.28/build/Midi.js"></script>
+  
   <script type="module">
-    import { Player } from 'https://cdn.jsdelivr.net/npm/karaoke-player@latest/dist/index.min.js';
+    // Note: Using Tone.js for better audio quality with synthesizers
+    // Soundfont GeneralUserGS.sf3 is available at /soundfonts/GeneralUserGS.sf3
     
     let emkFiles = [];
     let selectedFile = null;

package/demo-server.js

@@ -13,6 +13,9 @@ app.use(express.static(__dirname));
 // Serve karaoke-player library
 app.use('/lib', express.static(__dirname + '/node_modules/karaoke-player/lib'));
 
+// Serve soundfonts directory
+app.use('/soundfonts', express.static(path.join(__dirname, 'songs/soundfonts')));
+
 // API: Get list of EMK files
 app.get('/api/emk-files', (req, res) => {
   try {
@@ -184,14 +187,99 @@ app.post('/api/parse-kar', express.json(), async (req, res) => {
     // Decode base64 to buffer
     const karBuffer = Buffer.from(karData, 'base64');
     
-    // Use karaoke-player to get lyrics
+    // Use Tone.js for accurate MIDI parsing (handles tempo correctly!)
+    const midi = new Midi(karBuffer);
+    
+    // Use karaoke-player to get lyrics (Thai encoding is handled correctly!)
     const KarFile = require('./demo-libs/KarFile');
     const karFile = new KarFile();
     karFile.readBuffer(karBuffer);
-    const lyrics = karFile.getLyrics();
+    let lyrics = karFile.getLyrics();
     
-    // Use Tone.js for accurate MIDI parsing (handles tempo correctly!)
-    const midi = new Midi(karBuffer);
+    console.log(`✅ Loaded ${lyrics.length} lyric lines from karaoke-player`);
+    if (lyrics.length > 0) {
+      console.log(`   First lyric: ${(lyrics[0]?.time / 1000).toFixed(2)}s`);
+      console.log(`   Last lyric: ${(lyrics[lyrics.length - 1]?.time / 1000).toFixed(2)}s`);
+    }
+    
+    // Fix lyric timing: karaoke-player uses wrong tempo calculation
+    // Need to sync with actual MIDI note timing from Tone.js
+    // Find first actual vocal note (skip drums/intro)
+    let firstVocalNoteTime = Infinity;
+    for (let i = 1; i < midi.tracks.length; i++) {
+      const track = midi.tracks[i];
+      if (track.notes.length > 0) {
+        const firstNote = track.notes[0];
+        if (firstNote.time > 1 && firstNote.time < 10) {
+          firstVocalNoteTime = Math.min(firstVocalNoteTime, firstNote.time);
+        }
+      }
+    }
+    
+    // Find first real lyric (skip ***** and intro markers)
+    let firstRealLyricIndex = -1;
+    let firstLyricTime = 0;
+    for (let i = 0; i < lyrics.length; i++) {
+      const text = lyrics[i].text.replace(/[\.\*\s]/g, '');
+      if (text.length > 3 && !/^(Intro|intro)/.test(text)) {
+        firstRealLyricIndex = i;
+        firstLyricTime = lyrics[i].time / 1000; // Convert to seconds
+        break;
+      }
+    }
+    
+    // NO TIMING ADJUSTMENT NEEDED!
+    // After fixing cursor scaling (2.4x), KAR file timing is now correct.
+    // Lyrics are synchronized with vocal notes (gap < 0.1s).
+    // Any adjustment here would make it worse!
+    let timingOffset = 0;
+    
+    if (firstRealLyricIndex >= 0 && firstVocalNoteTime < Infinity) {
+      const gap = (firstLyricTime - firstVocalNoteTime);
+      console.log(`✅ KAR timing verified: vocal at ${firstVocalNoteTime.toFixed(2)}s, lyric at ${firstLyricTime.toFixed(2)}s, gap: ${(gap * 1000).toFixed(0)}ms`);
+      
+      // Only adjust if gap is significant (> 0.5s)
+      if (Math.abs(gap) > 0.5) {
+        timingOffset = -gap * 1000; // Negative gap means lyric is late, need negative offset
+        console.log(`⚠️  Applying timing adjustment: ${timingOffset.toFixed(0)}ms`);
+        
+      // Adjust all lyric timings only if needed
+        lyrics = lyrics.map(lyric => ({
+          ...lyric,
+          time: Math.max(0, lyric.time + timingOffset),
+          parts: lyric.parts ? lyric.parts.map(p => ({
+            ...p,
+            time: Math.max(0, p.time + timingOffset)
+          })) : lyric.parts
+        }));
+      }
+    }
+    
+    // 📊 DETAILED LYRIC TIMING LOG (ALL LINES)
+    console.log('\n' + '='.repeat(80));
+    console.log('📝 KAR FILE LYRIC TIMING (from karaoke-player) - ALL LINES');
+    console.log('='.repeat(80));
+    console.log('Line | Start Time | End Time   | Duration | Text');
+    console.log('-----|------------|------------|----------|' + '-'.repeat(40));
+    
+    for (let i = 0; i < lyrics.length; i++) {
+      const lyric = lyrics[i];
+      const startTime = (lyric.time / 1000).toFixed(3);
+      
+      // Calculate end time (start of next lyric or +2s)
+      const nextLyric = lyrics[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, 40);
+      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(40));
+    console.log(`Total: ${lyrics.length} lyric lines`);
+    console.log('='.repeat(80) + '\n');
     
     // Extract all note events with accurate timing from Tone.js
     const allEvents = [];