No Login Data Private Local Save

SSML Marker Demo - Online TTS Events & Highlights

23
0
0
0

🔊 SSML Marker Demo — Online TTS Events & Highlights

Test and visualize <mark> elements in speech synthesis. Listen to how markers trigger events and highlight corresponding words in real time.

SSML Input
Highlight Preview
Words will appear here after parsing...
🟡 current word 🔴 mark highlight
Event Log
Ready. Press Play to start.

📘 Frequently Asked Questions

The <mark> element in Speech Synthesis Markup Language (SSML) inserts a named marker into the text. When the speech engine reaches that point, it fires a mark event, enabling developers to synchronize visual highlights, animations, or other actions with the audio.

Type or paste SSML that contains one or more <mark name="yourName"/> elements. Click Play to start speech synthesis. The first word after each mark will be highlighted in red when the mark event fires, while the currently spoken word stays yellow. Check the Event Log for real-time mark and boundary events.

The Web Speech API with full SSML support (including mark events) works best in Google Chrome and Microsoft Edge. Firefox and Safari may not trigger mark events reliably. Always test across browsers if you plan to use markers in production.

Yes! You can insert as many <mark name="..."> as you need. Each one will fire its own event and highlight the corresponding word (the next word after the mark). Make sure each name is unique if you want distinct visual feedback.

A boundary event fires automatically at word (or sentence) boundaries during speech, giving you the current character index. The mark event only fires when the engine hits an explicitly placed <mark> element. Both are demonstrated here—yellow for boundaries, red for marks.
🔧 Related Tools