feat(editor): Add spectrogram visualizer

[wilywyrm]

Background

Manual edits of word-level timings require a bit more precision than line-level timings for normal lrc files.

This PR adds an audio spectrogram, which is a visualization of frequencies that can be used to help identify word boundaries. This is a feature found in dedicated timing utilities like Aegisub. I also made some UX improvements for the editor, especially around nudging timings of lines and words.

Implementation

• Added a spectrogram visualizer for the current focused line in the synced lyrics editor lane
• Added a globally persisted toggle for showing the spectrogram in the editor
• Added sync-end-to-next button to set the current line's end_ms to the next line's start_ms
• Added auto-fill for line timestamps on insert
• Added reordering for lines when line timestamp nudges would change which line goes first
• Added highlight for lines whose times overlap
• Added the ability to seek playback position by clicking in the word timing lane or spectrogram
• Added an alert icon indicator when the word's timing is invalid (end_ms < start_ms)
• Fixed bug where playback doesn't seek to the correct line when playback is stopped
• Fixed bug where lane doesn't update when the current line timing is nudged or the line is deleted
• Fixed bug where the start_ms of the first word doesn't change when nudging the line start backwards
• Fixed bug where the end_ms of the previous word doesn't change when you drag the start_ms of the current word (the editor expects words within a line to be contiguous)
• Changed line nudge behavior to only change first word start_ms and last word end_ms when nudging the line start and end times

Notes

This PR description is entirely human-authored, but the code for this change was written by Claude Opus. As part of development, I manually tested changes, reviewed the changeset for sanity, and trimmed comments for concision.

I apologize if this PR's scope is too large and am happy to split it up if you prefer.

I made these changes while using lrcget to manually adjust output from a whisper-based wrapper I wrote to add word-level timings to line-level lyrics. Like most of this type of tool, it gets things kind-of-approximately-sometimes right, but it may still be useful to maintainers and lrclib contributors if you considered backporting word-level timings to existing lrclib entries.

[AARP41298]

#349 related

[mihawk90]

Thank you for working on this, this is something I previously mentioned in #51 (comment), but then didn't pursue further getting busy with other things.

I'm not sure what library is used for rendering of the spectrogram, but it would be nice if there was an adjustment for the color palette. I'm used to the Aegisub default, so having it match would be ideal.
And in the same vein, having an adjustment for the "intensity" would also be welcome (in Aegisub that's the "Vertical zoom" slider, though it doesn't actually zoom vertically). Depending on the track, there can be a significant signal-to-noise-ratio and a slider would help with that.

Example:

[wilywyrm]

It would be nice if there was an adjustment for the color palette. I'm used to the Aegisub default, so having it match would be ideal. And in the same vein, having an adjustment for the "intensity" would also be welcome (in Aegisub that's the "Vertical zoom" slider, though it doesn't actually zoom vertically). Depending on the track, there can be a significant signal-to-noise-ratio and a slider would help with that.

Hey, thanks for the feature requests. I'm open to doing a little more work on this branch but I think I'd like more signal that the maintainer is open to merging in the feature before making more changes.

I would imagine a maintainer might be concerned with adding too many configuration knobs in the lrcget UI (where would a color palette go, what granularity of custom palette control is appropriate, is it worth having a color palette that is separate from the overall app theme, etc). Getting some answers to those concerns, and specifying the precise palette and intensity scaling behavior that you want would make implementation more likely.

You can also always make a PR into this branch and I can take a look at it.

[mihawk90]

where would a color palette go

Obviously I'm no maintainer, but I think taking the same approach that Aegisub does would work just fine, i.e. putting the controls right next to the spectrometer. Since color wouldn't be a slider, I'd probably put it in a separate options menu opened right there too. That way everything regarding the spectrometer would be condensed into the same area instead of spreading it across menus.

what granularity of custom palette control is appropriate

Again I'm not sure what this is using for the rendering, but if it happens to be using Wavesurfer, it comes with 3 presets.
If it uses ffmpeg, that also has various presets:

Aegisub's 2 color palettes seem to be defined here:
https://github.com/TypesettingTools/Aegisub/blob/4dfc7b2e5d5c861e337050a4fe8b708c6525f355/src/libresrc/default_config.json#L159-L202

I don't think exposing every possible color is necessary, just some handpicked presets.