Problem
Learning a song means repeating tricky sections over and over. Currently there's no way to loop a specific part — users have to manually seek back each time.
Proposal
An A-B loop feature: set a start point (A) and end point (B), and the player automatically loops that section.
Interaction
- During playback, click Set A (or press
[) → marks loop start at current time
- Click Set B (or press
]) → marks loop end, loop immediately activates
- Playback loops between A and B indefinitely
- Click Clear Loop (or press
\) to exit loop mode
- Visual: highlighted region on the progress bar between A and B markers
Visual Indicators
- Two draggable markers on the progress bar (A and B)
- Shaded/highlighted region between them
- Markers can be fine-tuned by dragging after placement
- Loop count indicator: "Loop 3/∞"
Smart Defaults
- Clicking a lyrics segment while in "loop mode" could auto-set A/B to that segment's start/end
- Double-click a segment to loop just that line
Keyboard Shortcuts
[ — Set A at current time
] — Set B at current time
\ — Clear loop
- Hold
Shift + click a word → Set A; Shift + click another word → Set B
Implementation
- In the seek/playback logic (
usePlayer.ts), check if currentTime >= loopB and seek to loopA
- Store loop state:
{ a: number | null, b: number | null, active: boolean }
- Progress bar component needs overlay for the loop region
Complexity
Low-medium. Core logic is a simple time check in the playback loop. UI work for the progress bar markers is the main effort.
Problem
Learning a song means repeating tricky sections over and over. Currently there's no way to loop a specific part — users have to manually seek back each time.
Proposal
An A-B loop feature: set a start point (A) and end point (B), and the player automatically loops that section.
Interaction
[) → marks loop start at current time]) → marks loop end, loop immediately activates\) to exit loop modeVisual Indicators
Smart Defaults
Keyboard Shortcuts
[— Set A at current time]— Set B at current time\— Clear loopShift+ click a word → Set A;Shift+ click another word → Set BImplementation
usePlayer.ts), check ifcurrentTime >= loopBand seek toloopA{ a: number | null, b: number | null, active: boolean }Complexity
Low-medium. Core logic is a simple time check in the playback loop. UI work for the progress bar markers is the main effort.