<script src="https://cdn.jsdelivr.net/npm/midijs@0.2.1/build/MIDI.js"></script> <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script> <script> // Main implementation class MIDIClefKaraokePlayer constructor() this.midiData = null; this.audioContext = null; this.isPlaying = false; this.startTime = 0; this.currentPauseTime = 0; this.notes = []; this.lyrics = []; this.clef = 'treble'; // treble or bass this.canvas = document.getElementById('staffCanvas'); this.ctx = this.canvas.getContext('2d'); this.animationId = null; this.scrollOffset = 0;
drawStaff() this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); const staffTop = 50; const staffBottom = 250; const lineSpacing = 25; // Draw 5 staff lines this.ctx.beginPath(); this.ctx.strokeStyle = '#333'; this.ctx.lineWidth = 1.5; for (let i = 0; i < 5; i++) const y = staffTop + (i * lineSpacing); this.ctx.moveTo(50, y); this.ctx.lineTo(this.canvas.width - 50, y); this.ctx.stroke(); // Draw clef this.ctx.font = 'bold 60px "Segoe UI", "Arial"'; this.ctx.fillStyle = '#e94560'; if (this.clef === 'treble') this.ctx.fillText('𝄞', 20, staffTop + 100); else this.ctx.fillText('𝄢', 20, staffTop + 100); // Draw notes based on current scroll offset const currentTime = this.isPlaying ? (performance.now() - this.startTime) / 1000 : this.currentPauseTime; const visibleTimeRange = 4; // seconds visible const pixelsPerSecond = (this.canvas.width - 100) / visibleTimeRange; this.notes.forEach(note => const noteTime = note.startTime; const x = 80 + (noteTime - currentTime) * pixelsPerSecond; if (x > 30 && x < this.canvas.width - 30) const midiPitch = note.pitch; const staffPosition = this.midiToStaffY(midiPitch); if (staffPosition !== null) this.drawNote(x, staffPosition, note.duration * pixelsPerSecond); ); // Draw current time marker this.ctx.beginPath(); this.ctx.strokeStyle = '#ff0000'; this.ctx.lineWidth = 2; this.ctx.moveTo(80, 20); this.ctx.lineTo(80, this.canvas.height - 20); this.ctx.stroke(); if (this.isPlaying) this.animationId = requestAnimationFrame(() => this.drawStaff());
drawNote(x, y, width) this.ctx.beginPath(); this.ctx.fillStyle = '#2c3e66'; this.ctx.shadowBlur = 0; // Draw ellipse for note head this.ctx.ellipse(x, y, 12, 8, 0, 0, Math.PI * 2); this.ctx.fill(); this.ctx.fillStyle = '#1a1a2e'; this.ctx.fill(); // Draw stem this.ctx.beginPath(); this.ctx.moveTo(x + 10, y); this.ctx.lineTo(x + 10, y - 30); this.ctx.lineWidth = 2; this.ctx.stroke(); // Draw flag if duration is long enough if (width > 15) this.ctx.beginPath(); this.ctx.moveTo(x + 10, y - 30); this.ctx.quadraticCurveTo(x + 25, y - 25, x + 20, y - 15); this.ctx.stroke();
play() if (!this.midiData
initEventListeners() document.getElementById('midiFileInput').addEventListener('change', (e) => this.loadMIDI(e)); document.getElementById('playBtn').addEventListener('click', () => this.play()); document.getElementById('pauseBtn').addEventListener('click', () => this.pause()); document.getElementById('stopBtn').addEventListener('click', () => this.stop());
pause() if (this.isPlaying) this.isPlaying = false; this.currentPauseTime = (performance.now() - this.startTime) / 1000; MIDI.stopAllNotes();
.controls display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; justify-content: center; midi clef karaoke player
input[type="file"] background: #533483; color: white; padding: 12px 24px; border-radius: 50px; cursor: pointer; border: none; font-size: 16px;
canvas display: block; margin: 0 auto; background: #fff9e8; border-radius: 10px; cursor: pointer;
updateLyrics() const currentTime = this.isPlaying ? (performance.now() - this.startTime) / 1000 : this.currentPauseTime; const currentLyric = this.lyrics.filter(l => l.time <= currentTime).pop(); if (currentLyric) document.getElementById('lyricsDisplay').innerHTML = `🎤 $currentLyric.text 🎤`; <script src="https://cdn
.info color: white; text-align: center; margin-top: 15px; font-size: 14px;
const arrayBuffer = await file.arrayBuffer(); this.midiData = new MIDI.File(arrayBuffer); this.parseMIDIData(); this.detectClef(); this.drawStaff(); document.getElementById('lyricsDisplay').innerHTML = '🎤 Ready to play 🎤';