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.

WebsiteVoice

<h4>Add text-to-speech to your WordPress website</h4>
WebsiteVoice allows you to easily turn your WordPress articles into high-quality speech audio for your audience to listen while they’re busy multitasking or on the go.
Allow the Artificial Intelligence voices of WebsiteVoice to read your articles. Increase user engagement and accessibility for your WordPress blog.
PS: You’ll need a <a href="https://websitevoice.com/login" rel="nofollow ugc">WebsiteVoice.com token</a> to use it. Tokens are completely free for the first days, then you will have to upgrade to keep using the service.

WebsiteVoice allows you to easily turn your WordPress articles into high-quality speech audio for your audience to listen while they’re busy multitask …

Speakable vs WebsiteVoice