devshagor

themeshape

Speakable adds a play button to your articles that reads the content aloud using the browser’s built-in speech synthesis engine. No external API keys, no usage costs, no third-party services.
Features:
<ul>
<li>Play / Pause / Stop controls</li>
<li>Adjustable playback speed (0.75x – 2x)</li>
<li>Progress bar with sentence counter</li>
<li>Voice, pitch, volume, and speed settings from the admin dashboard</li>
<li>Enable/disable per post type (Posts, Pages, Products, etc.)</li>
<li>Customizable button color with live preview</li>
<li>Gutenberg block — place the player anywhere in your content</li>
<li>Sticky mini-player that follows users while scrolling</li>
<li>Mobile-optimized with large touch targets</li>
<li>Accessible: ARIA labels, roles, keyboard navigation, and live regions</li>
<li>Zero external dependencies — no third-party scripts, fonts, or services</li>
</ul>
Gutenberg Block:
Search for “Speakable Player” in the block inserter to place the player at any position in your content. The block automatically disables global auto-insertion for that post to prevent duplicates.
How It Works:
<ol>
<li>The plugin filters post content to inject a player bar (or use the Gutenberg block)</li>
<li>JavaScript extracts article text and splits it into sentences</li>
<li>Each sentence is spoken using the Web Speech API</li>
<li>Sentence-by-sentence playback avoids Chrome’s known timeout bug</li>
</ol>
<h3>Source Code and Development</h3>
This plugin is fully GPL. The maintained development location is:
https://github.com/devshagor/speakable
The human-readable source for every shipped file is also bundled inside the plugin itself:
<ul>
<li>Block editor source: <code>src/blocks/speakable-player/index.js</code> and <code>src/blocks/speakable-player/editor.css</code></li>
<li>Block render template (server-side): <code>src/blocks/speakable-player/render.php</code></li>
<li>Block metadata: <code>src/blocks/speakable-player/block.json</code></li>
<li>All PHP classes are unminified and live under <code>includes/</code></li>
<li>All admin/frontend CSS and JS are unminified and live under <code>assets/</code></li>
</ul>
The contents of <code>build/blocks/speakable-player/</code> are produced from <code>src/blocks/speakable-player/</code> using <code>@wordpress/scripts</code>.
To regenerate the build output:
<pre><code>npm install
npm run build
</code></pre>
This runs <code>wp-scripts build --webpack-src-dir=src/blocks --output-path=build/blocks</code>. The <code>npm run start</code> command provides a development watch mode.

Speakable

Add a text-to-speech player to your posts and pages using the browser's built-in Web Speech API. Free, no API keys required.

texthelp

<h4>Add speech, reading and translation support to your website or blog with the ReachDeck Toolbar</h4>
Want to provide a better experience for your website or blog visitors?
Millions of people can’t understand the information on your website or blog site – they can with the ReachDeck Toolbar.
Our innovative support software, ReachDeck, helps to reduce the barriers between your content and your audiences by adding speech, reading and translation to your website or blog site. This support helps you reach a much wider audience – such as those with dyslexia, low literacy, mild visual impairments or where English is a second language.
<h4>What does the ReachDeck Toolbar do?</h4>
Text-to-speech: makes online services and information more accessible with a choice of read aloud voices, different reading speeds and highlighters to enhance understanding.
Translation: translates web pages into 99 languages and can read aloud 40 of the most commonly used languages including Spanish and Chinese.
MP3 Creation: instantly converts online content into audio versions for easy offline listening.
Screen Masking: blocks online clutter – letting the user focus on the text they want to read.
Web Page Simplifier: removes distracting content creating a simple format for online information – ideal for those with dyslexia, cognitive or learning disabilities.
Custom Settings: users can tailor the settings to suit their individual needs and preferences.
<h4>What our customers say</h4>
Student Loans Company, UK
“Identifying ways of improving digital accessibility for our customers is of the utmost importance to us and the ReachDeck Toolbar is an ideal solution as it is simple to use, free to the customer, and also compatible with mobile devices.”
Elections Nova Scotia, Canada
“Adding the ReachDeck Toolbar to our websites is reflective of our commitment to accessibility in every aspect of Nova Scotia elections, particularly for those persons and groups most likely to experience difficulty in exercising their democratic rights.”

ReachDeck Toolbar

Websites made more accessible with easy speech, reading and translation tools.

Speakable vs ReachDeck Toolbar