Listen to Article Button Widget
Add a listen to this article button that reads your post aloud with the text-to-speech already in your visitor's browser. Readers can pause, resume, stop and change the speed, and by default only voices installed on their own device are used.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="listen-to-article-button"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
When a visitor presses Listen, the component collects the paragraphs, headings, list items, quotes and captions inside your article (or the element you name), skipping navigation, asides, footers, forms and anything marked data-a2z-listen="off". Each paragraph is split into sentences and joined into pieces of up to about 220 characters, because some engines - Chrome in particular - stop speaking part-way through long utterances. It picks a voice for the language in data-lang or your page's lang attribute, preferring an exact match such as en-GB, then the same language in another region, and only voices on the device unless you allow network voices. Pause cancels the current piece and remembers where it was, which behaves the same on every browser; Resume starts that piece again. Progress reads 'Paragraph 3 of 12'. Where the browser has no speech synthesis at all, the button does not appear.
Method
- Text: h1-h6, p, li, blockquote, dt, dd, figcaption, pre and td inside your selector, else article, else main, else .entry-content; the innermost block only, at most 400
- Pieces: sentences ending in . ! ? (and the Chinese, Japanese and Devanagari full stops), joined up to 220 characters; a longer sentence splits at a comma, then a space, then hard
- Voice: exact language match (+4), same primary language (+2), the browser's default (+1), on-device (+0.5); network voices excluded unless allowed
- Speed: SpeechSynthesisUtterance.rate 0.75, 1, 1.25, 1.5, 1.75 or 2
- Pause = speechSynthesis.cancel() keeping the position; Resume speaks the current piece again; leaving the page cancels speech
Worked examples
A long sentence split for Chrome
Inputs: One 600-character sentence of 120 words
Result: Three pieces, each at most 220 characters, broken at spaces with no word lost
Speaking pieces one after another avoids Chrome's cut-off for long utterances.
Voice choice with network voices off
Inputs: Page lang es-MX; voices: en-US (network, default), es-ES (on device)
Result: The es-ES on-device voice is used
No es-MX voice exists, so the same language in another region is chosen; the network English voice is never considered.
No usable voice
Inputs: Page lang fr; the only French voice is a network voice; network voices off
Result: 'This device has no built-in voice for this language.'
The widget says so instead of reading French text with an English voice.
Limitations
- Pronunciation of names, numbers and abbreviations is up to the visitor's speech engine.
- Some phone browsers stop speaking when the screen locks or the tab goes to the background.
- Text inside images, embedded videos and iframes is not read.
Where publishers use it
- A long-read blog offering readers with dyslexia or tired eyes an easy way to listen instead of read
- A recipe site where cooks listen to the method with flour on their hands
- A multilingual news site where each language version sets html lang, so Spanish pages are read by a Spanish voice
- A study-guide site letting students play notes at 1.5x speed while they revise
Questions
Is my article sent to A2Z or anyone else?
Never to A2Z. With the default setting only voices installed on the visitor's device are used, and the speech is generated locally. If you switch on network voices, browsers that provide them (for example Google voices in Chrome or the 'Online (Natural)' voices in Edge) send the text being read to their own speech service - the W3C specification exposes this through the voice's localService flag, which is how the widget tells the two apart.
Why does it say there is no voice for my language?
With network voices off, the visitor's device needs an installed voice for the page language. Windows, macOS, iOS and Android ship several; desktop Linux often has none. You can allow network voices, or visitors can add a voice in their system's speech settings.
Which browsers support it?
Current Chrome, Edge, Safari (macOS and iOS), Firefox and Samsung Internet implement speech synthesis. Voice choice and quality differ by system. Where it is missing entirely the button is not shown, so no reader sees a control that cannot work.
Can it highlight the words as they are read, or offer an MP3?
No. Word timing events are unreliable across engines, and an MP3 would require sending your text to a server to synthesise it. The widget keeps everything in the browser instead.
Sources
- Web Speech API (speech synthesis) - W3C Audio Community Group / Web Platform Incubator CG . SpeechSynthesis.speak/cancel/getVoices, SpeechSynthesisUtterance (lang, voice, rate) and SpeechSynthesisVoice.localService.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Listen to Article Button https://a2z.tools/embed/listen-to-article-button
<a href="https://a2z.tools/embed/listen-to-article-button">A2Z Tools Listen to Article Button</a>
[A2Z Tools Listen to Article Button](https://a2z.tools/embed/listen-to-article-button)
Listen to Article Button by A2Z Tools - https://a2z.tools/embed/listen-to-article-button
Related widgets
-
Shows "6 min read" on your post, counted from the page's own text at a researched 238 words per minute.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
-
An automatic table of contents from your headings, with active-section highlight and sticky-header offset.
-
Links between your own language versions - dropdown, inline or floating - with hreflang and no flags.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
"Updated 3 October 2026" from your page's real modified date - meta tags or JSON-LD - never the load time.
