Add progress bar and seek controls to Motif player

- Add interactive progress bar with visual fill indicator
- Show current time and total duration
- Enable seeking/scrubbing through the synthesis
- Improve Motif player UX with cleaner layout
- Add progress tracking that updates 10x per second
- Format time display as MM:SS
- Progress bar appears when playback starts
- Seeking updates event indices for smooth playback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
b1rdmania
2025-12-18 19:17:02 +00:00
parent 96477e9c4a
commit 3031614914
4 changed files with 224 additions and 3 deletions
+27
View File
@@ -134,6 +134,33 @@ export class MotifEngine {
}
}
seek(progress: number): void {
if (this.synthesisEngine) {
this.synthesisEngine.seek(progress);
}
}
getProgress(): number {
if (this.synthesisEngine) {
return this.synthesisEngine.getProgress();
}
return 0;
}
getCurrentTime(): number {
if (this.synthesisEngine) {
return this.synthesisEngine.getCurrentTime();
}
return 0;
}
getDuration(): number {
if (this.synthesisEngine) {
return this.synthesisEngine.getDuration();
}
return 0;
}
private generateSyntheticMIDI(songName: string): NoteEvent[] {
// Generate procedural MIDI based on song name hash
const hash = this.simpleHash(songName);