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.

Create a talk style design in the block editor. 
Gutenberg Editor Blocks Plugin. Compatible with AMP.
<h4>Settings</h4>
<ul>
<li>Avatar, Name</li>
<li>Direction: Left, Right</li>
<li>Design: Default, Bubble, Square, Dashed, Shadow, Borderless</li>
<li>Size: Default, Small, Large</li>
<li>Options: Default, Short, Vertical</li>
<li>Background color, Text color</li>
<li>latest information on <a href="https://lqd.jp/wp/" rel="nofollow ugc">LIQUID PRESS</a>.</li>
</ul>

LIQUID SPEECH BALLOON

吹き出しプラグインを使いたいがために、ブロックエディタに乗り換える方々の背中を押していることが多いです。非常に使いやすくて満足しています。ありがとうございます！！

Speakable vs LIQUID SPEECH BALLOON