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.

gearinvent

Dictation (Speech Recognition) adds an interactive MIC icon to the wordpress editing screens. When editing a Post or Page just click on MIC icon and start talking.
The plugin will automatically insert the converted text from voice into your blog!
<h4>Key Features</h4>
<ul>
<li>Dictation (Speech Recognition) is based on the latest Google API</li>
<li>WordPress MultiSite compatible</li>
<li>Custom post types are supported</li>
<li>Easily use your voice in the standard post edit and page edit screens</li>
<li>Real-time voice to text converter using Chrome on Desktop</li>
</ul>
<a href="http://dictation.gearinvent.com" rel="nofollow ugc">Home Page</a> | 
<a href="http://dictation.gearinvent.com/documentation" rel="nofollow ugc">Documentation</a> | 
<a href="http://dictation.gearinvent.com/faq" rel="nofollow ugc">FAQ</a> | 
<a href="http://dictation.gearinvent.com/faq" rel="nofollow ugc">Support</a>
<h3>Upgrade</h3>
<ol>
<li>Deactivate your old version</li>
<li>Follow the installation instructions to install the new version</li>
</ol>

Dictation (Speech Recognition)

Dictation (Speech Recognition) is the most popular and easiest way to Write a POST with your voice, converting voice on text with any language.

Speakable vs Dictation (Speech Recognition)