Pitch shifting and tempo control

[LoggeL]

Problem

Not everyone can sing in the original key. Tempo control is also essential for learning fast songs. These are core karaoke features missing from MelodAI.

Proposal

Pitch Shift (semitones: -6 to +6)

• Add pitch shifting via Web Audio API
• Use AudioBufferSourceNode.detune (in cents, 100 cents = 1 semitone) or a library like soundtouchjs for higher quality
• Apply to both vocal and instrumental tracks simultaneously
• UI: small +/- buttons or a compact slider near the volume controls, showing current shift (e.g. "+2" or "-3")
• Reset button to return to original key

Tempo Control (0.5x to 1.5x)

• Use AudioBufferSourceNode.playbackRate for basic implementation
• Challenge: playbackRate changes both speed AND pitch — need pitch-compensated time stretching for quality results
• soundtouchjs or Tone.js can do pitch-independent tempo changes
• UI: compact speed selector (0.75x, 1.0x, 1.25x, 1.5x) or a slider
• Must keep lyrics sync accurate — scale all timestamps by the tempo factor

Lyrics Sync Adjustment

• When tempo changes, word highlight timing must scale proportionally
• currentTime from the audio context already reflects playback rate, so this may work automatically
• Test carefully with the animation-frame sync loop in usePlayer.ts

UI Placement

Add a collapsible "Audio Settings" row below the progress bar or in a popover from a gear icon on the controls bar. Keep the main controls clean.

Complexity

Medium. The Web Audio API supports basic pitch/tempo but quality pitch-shifting may need a library.