Skip to content

Speaker-coloured captions: <v Speaker> voice spans + optional STYLE palette in generated WebVTT/SRT #284

Description

@maboa

caption.js already segments captions by speaker (segmentMeta.speaker; a new segment starts on each speaker change) but emits plain cue text with no speaker markup. Add speaker attribution and optional colour styling to the generated captions, so every consumer gets consistent, portable speaker colours instead of reimplementing it.

Two parts

  1. Voice tags (semantics). Emit <v Speaker>…</v> in the VTT cue text for segments that have a speaker. Standard WebVTT — helps screen readers and players that surface the name — independent of colour.
  2. Colour styling (opt-in). Behind an init option, prepend a STYLE block mapping each speaker to a colour from a default, caller-overridable palette. Deterministic per speaker (order of appearance / stable hash), cycling for many, a sensible default for no-speaker.

API. Expose via caption().init(...) options, e.g. { colourSpeakers: true, speakerPalette: [...] } (names TBD); default palette built in so callers get colours with zero config but can override for theming.

SRT. Apply the same colouring via <font color="#…"> tags when the option is on — note it's player-dependent.

Compatibility. Adding <v> changes the VTT output — verify it doesn't break existing consumers that parse/display cue text or the SRT path. Decide whether voice tags are always-on or gated alongside colour.

Palette / a11y. Default colours need adequate contrast on the (typically dark) caption background; never rely on colour alone (the voice name stays).

Companion (consumer): hyperaudio/hyperaudio-lite-editor#536 — default-on inline, export toggle, theme override, burn-in.

Acceptance: <v Speaker> emitted for speaker segments; with the option, a STYLE block + per-speaker colours; configurable palette with a default; SRT font-tag variant; jest tests for the generated VTT/SRT; npm run build .mjs regen + build-consistency gate green.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions