Skip to content

Fix karaoke highlight crash when editing the transcript#295

Merged
maboa merged 1 commit into
mainfrom
294-karaoke-highlight-crash
May 26, 2026
Merged

Fix karaoke highlight crash when editing the transcript#295
maboa merged 1 commit into
mainfrom
294-karaoke-highlight-crash

Conversation

@maboa
Copy link
Copy Markdown
Member

@maboa maboa commented May 26, 2026

Summary

When the user deletes spans in the transcript while playback is running, hyperaudio-lite's cached wordArr still references the now-detached nodes. If its setTimeout poll fires before the editor's debounced refreshHyperaudioInstance rebuilds the array, updateTranscriptVisualState dereferences word.n.parentNode.classList on a node whose parentNode is null — the rejection happens inside the setTimeout callback so the polling chain dies silently, freezing the karaoke highlight for the rest of the session.

Monkeypatches updateTranscriptVisualState on the HyperaudioLite instance to filter wordArr to live entries before delegating to the original. The library only uses wordArr via a fresh binary search per call, so a temporarily shrunken array is consistent. The next debounced refreshHyperaudioInstance rebuilds wordArr fully from the live DOM.

Kept the fix in the editor rather than upstream because the race only exists for editor-style consumers that mutate the transcript DOM at runtime; hyperaudio-lite is otherwise read-only.

Fixes #294.

Test plan

  • Play the demo media. Rapidly delete words/paragraphs from the transcript. Confirm no console errors and the highlight keeps tracking the audio.
  • Strikethrough toggle + gap-skip continue to work as before.
  • Switch to caption mode and back via restoreTranscript — confirm the patch is applied to the fresh HyperaudioLite instance (re-applied on every hyperaudio() call).
  • Page load with no edits → highlight behavior unchanged from main.

When the editor deletes spans, the library's cached wordArr still
references the now-detached nodes until the debounced refresh
rebuilds it. If the library's setTimeout poll fires inside that
window, updateTranscriptVisualState dereferences
word.n.parentNode.classList on a node whose parentNode is null
and the rejection kills the polling chain — the karaoke
highlight freezes for the rest of the session.

Monkeypatch updateTranscriptVisualState on the HyperaudioLite
instance to filter wordArr to live entries before delegating to
the original. The library only uses wordArr via a fresh binary
search per call, so a temporarily shrunken array is consistent.
The next debounced refreshHyperaudioInstance rebuilds wordArr
fully from the live DOM.

Fixes #294.
@maboa maboa merged commit 19d22a1 into main May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Karaoke highlight crashes mid-edit on null parentNode

1 participant