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.

Mosne / Paolo Tesei

<p>This is a block that allows you to add a text-to-speech feature to your website.<br />
Using the Web Speech API, the plugin will read the content of the page according to the document language and user’s preferences.<br />
No third-party services are used, so no cookies are required. GDPR-friendly. Accessibility-ready.</p>
<h3>Key Features</h3>
<ul>
<li>Listen to the content of a page according to the document language and user’s preferences.</li>
<li>(New) Highlight the current sentence being spoken with custom colors.</li>
<li>Skip undesired content by adding the class .skip-speech to the element.</li>
<li>Accessibility-ready</li>
<li>No cookies used (GDPR-friendly)</li>
<li>Performance-optimized and lightweight</li>
<li>No block library required</li>
<li>Primarily built with native WordPress components</li>
<li>Developer-friendly and easy to customize</li>
</ul>
<h3>Stay Connected</h3>
<ul>
<li><a href="https://github.com/mosne/mosne-text-to-speech-block" rel="nofollow ugc">View on GitHub</a></li>
<li><a href="https://mosne.it/" rel="nofollow ugc">Visit my website</a></li>
</ul>
<h3>Credits</h3>
<p>The icons of this block come from Heroicons with MIT license<br />
<a href="https://heroicons.com/" rel="nofollow ugc">heroicons.com</a></p>


Mosne Text to Speech Block

I only have 2 words for this !

Read the content of a page using native Speech Synthesis and Interactivity API.

Speakable vs Mosne Text to Speech Block