Add visual feedback showing which items are queued, currently speaking, or already spoken.
This helps users/dev understand what's happening and troubleshoot issues.
Color States:
- Enqueued (not yet spoken): Light blue background (
rgba(33, 150, 243, 0.15))
- Currently speaking: Translucent yellow background (
rgba(255, 255, 0, 0.25)) - already implemented
- Already spoken: Light gray background (
rgba(0, 0, 0, 0.05))
Features:
Implementation:
- Hook into
addSpokenItem() for enqueued state
- Hook into speech start event for speaking state
- Hook into speech end event for spoken state
- Use data attributes to track state:
data-tts-state="enqueued|speaking|spoken"
Add visual feedback showing which items are queued, currently speaking, or already spoken.
This helps users/dev understand what's happening and troubleshoot issues.
Color States:
rgba(33, 150, 243, 0.15))rgba(255, 255, 0, 0.25)) - already implementedrgba(0, 0, 0, 0.05))Features:
Implementation:
addSpokenItem()for enqueued statedata-tts-state="enqueued|speaking|spoken"