devshagor

themeshape

<p>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.</p>
<p><strong>Features:</strong></p>
<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>
<p><strong>Gutenberg Block:</strong></p>
<p>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.</p>
<p><strong>How It Works:</strong></p>
<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>
<p>This plugin is fully GPL. The maintained development location is:</p>
<p>https://github.com/devshagor/speakable</p>
<p>The human-readable source for every shipped file is also bundled inside the plugin itself:</p>
<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>
<p>The contents of <code>build/blocks/speakable-player/</code> are produced from <code>src/blocks/speakable-player/</code> using <code>@wordpress/scripts</code>.</p>
<p>To regenerate the build output:</p>
<pre><code>npm install
npm run build
</code></pre>
<p>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.</p>


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.

ResponsiveVoice

<p><a href="https://responsivevoice.org/wordpress-text-to-speech-plugin/" rel="nofollow ugc">ResponsiveVoice</a> is a HTML5-based Text-To-Speech library designed to add voice features to WordPress across all smartphone, tablet and desktop devices. It supports 51 languages through 168 voices and has no dependencies.</p>
<p>Languages include UK English, US English, Spanish, French, Deutsch, Italian, Greek, Hungarian, Turkish, Russian, Dutch, Swedish, Norwegian, Japanese, Korean, Chinese, Hindi, Serbian, Croatian, Bosnian, Romanian, Catalan, Australian, Finnish, Afrikaans, Albanian, Arabic, Armenian, Czech, Danish, Esperanto, Hatian Creole, Icelandic, Indonesian, Latin, Latvian, Macedonian, Moldavian, Montenegrin, Polish, Brazilian Portuguese, Portuguese, Serbo-Croatian, Slovak, Spanish Latin American, Swahili, Tamil, Thai, Vietnamese and Welsh.</p>
<h3>Support and Questions visit here first:</h3>
<blockquote>
<ul>
<li><a href="https://responsivevoice.org/support" rel="nofollow ugc">Support</a></li>
</ul>
</blockquote>
<h3>Useful Links:</h3>
<blockquote>
<ul>
<li><a href="https://responsivevoice.org/wordpress-text-to-speech-plugin/" rel="nofollow ugc">Live Demo</a></li>
<li><a href="https://responsivevoice.org/wordpress-text-to-speech-plugin/" rel="nofollow ugc">Homepage</a></li>
<li><a href="https://responsivevoice.org/wordpress-text-to-speech-plugin/" rel="nofollow ugc">Documentation</a></li>
</ul>
</blockquote>
<h3>Features:</h3>
<ul>
<li>Listen to any post or page with the tap of a button</li>
<li>Shortcodes to place Listen button anywhere on the post or page</li>
<li>51 languages supported through 168 voices</li>
<li>Unlimited text to speech</li>
<li>Easy access to content for website users, tap to listen to your page or post read aloud</li>
<li>A more functional website for a range of users including visually impaired and the elderly</li>
<li>Web Accessibility Compliance Group 2.0, ADA and BS 8878:2010 features</li>
</ul>
<h3>Usage:</h3>
<ul>
<li>
<p>From version 1.6.6, we added API Key configuration to WordPress settings. To experience the complete range of voices,<br />
<a href="https://responsivevoice.org/register" rel="nofollow ugc">register free and get your API Key</a>. The plugin will still work without it, but<br />
you will be limited to available browser voices.</p>
</li>
<li>
<p>It’s Easy – To have the Listen button appear put the following shortcode anywhere in the text of your page or post.<br />
[responsivevoice_button]</p>
</li>
</ul>
<p>You can select a voice by using the “voice” parameter, and change the text that appears on the button with the “buttontext” parameter. The following shortcode will read in the US English Female voice, and the button will say “Play”.<br />
    [responsivevoice_button voice=”US English Female” buttontext=”Play”]<br />
A full list of ResponsiveVoice names is available at <a href="https://responsivevoice.org/text-to-speech-languages/" rel="nofollow ugc">Documentation</a>. Default is UK English Female.</p>
<ul>
<li>Read a whole page, or just sections of text – If you don’t want the whole page or post to be read, just surround the salient text with<br />
[responsivevoice]Text you want ResponsiveVoice to read [/responsivevoice]<br />
This tag also supports the voice and buttontext parameters. Additionally, you can place the button after the text (it will be before by default) with the “buttonposition” tag, like so:<br />
[responsivevoice buttonposition=”after”]Text you want ResponsiveVoice to read [/responsivevoice]</li>
</ul>
<p>The shortcodes also allow other parameters. You can adjust the Voice’s pitch, volume and rate with<br />
    [responsivevoice_button rate=”1″ pitch=”1.2″ volume=”0.8″ voice=”US English Female” buttontext=”Play”]</p>
<p>For more details, please see the <a href="https://responsivevoice.org/wordpress-text-to-speech-plugin/" rel="nofollow ugc">Documentation</a></p>
<h4>Requirements</h4>
<p>There are no requirements, you do not need to install cURL.</p>


ResponsiveVoice Text To Speech

Not so much on LeapPad or iPhone/Safari. Support was prompt and courteous in responding to my query about this. May be a LeapPad issue rather than an issue with this plugin. For fun, have the Russian voices read the text "moose and squirrel"!

Works great on desktop

ResponsiveVoice the leading HTML5 text to speech synthesis solution, is now available for WordPress. Over 51 languages through 168 voices.

Speakable vs ResponsiveVoice Text To Speech