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.

webinista

Webinista WreadIt <a href="https://wreadit.webinista.com" rel="nofollow ugc">https://wreadit.webinista.com</a>
A WordPress plugin for creating audio versions of your posts using Amazon Polly.
Current version: v1.2.0 <a href="https://github.com/webinista/webinista-wreadit/releases/" rel="nofollow ugc">See all releases</a>.
You can also view, edit, or download the <a href="https://github.com/webinista/webinista-wreadit/" rel="nofollow ugc">source code</a> from GitHub.
<h4>License</h4>
Webinista WreadIt is licensed under the terms of the GNU General Public License, version 3. Some of its dependencies use the MIT 2.0 and Apache 2.0 licenses.
<pre><code>This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
</code></pre>
<h4>Prerequisites</h4>
This plugin assumes that you are familiar with <a href="https://aws.amazon.com/" rel="nofollow ugc">Amazon Web Services</a> and that you have an account. You will need:
<ul>
<li>An Amazon Simple Storage Service (S3) bucket.</li>
<li>An IAM user with full access to Polly and read/write access to the S3 bucket.</li>
<li>A key ID and Secret Access Key for the IAM user.</li>
</ul>
<h3>Development</h3>
You can also build this plugin from source. This requires having <a href="https://nodejs.org/" rel="nofollow ugc">Node</a>, PHP, and <a href="https://getcomposer.org/" rel="nofollow ugc">Composer</a> available on your system.
<ol>
<li>Clone the GitHub repo https://github.com/webinista/webinista-wreadit</li>
<li>From <code>webinista-wreadit</code> directory, run the following commands:
<ol>
<li><code>npm install</code> to install the JavaScript dependencies for the front-end.</li>
<li><code>composer install</code> to install PHP dependencies. You may also need to install the <a href="https://github.com/humbug/php-scoper/blob/main/docs/installation.md#composer" rel="nofollow ugc">php-scoper plugin</a> using <code>composer bin php-scoper require --dev humbug/php-scoper</code>.</li>
<li>Run the <code>build-wreadit-aws3.sh</code> script. This script downloads the latest version of the AWS SDK for PHP, extracts the relevant interfaces and common files, and scopes it to the project’s name space.</li>
</ol>
</li>
<li>Use <code>npm run build</code> to generate the front-end plugin files.</li>
<li>Upload the <code>webinista-wreadit</code> directory to <code>/wp-content/plugins/</code>.</li>
</ol>
Activate the plugin and add your credentials before using.
<h3>External services</h3>
This plugin connects to Amazon Polly, and Amazon S3. Clicking the Generate Audio Version button sends the following data to Amazon Polly:
<ul>
<li>The title and text of the blog post.</li>
<li>The slug of the blog post.</li>
<li>The display name of the post’s author. (Manage using the Display name publicly as setting on the Edit User screen.)</li>
<li>Your AWS Key ID.</li>
<li>Your Secret Access Key.</li>
<li>The name of your S3 bucket.</li>
</ul>
Read Amazon’s <a href="https://aws.amazon.com/polly/faqs/#topic-2" rel="nofollow ugc">Polly FAQs</a>, 
general <a href="https://aws.amazon.com/compliance/data-privacy-faq/" rel="nofollow ugc">Data Privacy FAQs</a>, and <a href="https://aws.amazon.com/privacy/" rel="nofollow ugc">AWS Privacy Notice</a> to understand how Amazon uses your data. Read the <a href="https://aws.amazon.com/agreement/" rel="nofollow ugc">AWS Customer Agreement</a> and <a href="https://aws.amazon.com/service-terms/" rel="nofollow ugc">AWS Service Terms</a> to understand your rights and obligations with regard to Amazon’s services.
Amazon Polly requires your Key ID and Secret Access Key in order to authenticate the request. Amazon Polly saves the generated audio file to your S3 bucket.
Webinista WreadIt uses <a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/VirtualHosting.html" rel="nofollow ugc">S3’s virtual hosting</a>. URLs for audio files use the pattern shown below, unless you’ve set a custom domain.
<pre><code>https://<bucket name>.s3.<region code>.amazonaws.com/<your optional prefix/><file name>
</code></pre>
For example, if your bucket name is <code>myblogsaudio</code>, your bucket region is <code>us-east-2</code>, and you’ve set a <code>media/</code> prefix, your audio URLs will begin with <code>https://myblogsaudio.s3.us-east-2.amazonaws.com/media/</code>.
File names begin with the slug of each blog post. Amazon Polly also appends a unique identifier to the name.
Audio files must be publicly readable to be available to your listeners.

Webinista WreadIt

A text-to-speech plugin for WordPress that uses Amazon Polly.

Speakable vs Webinista WreadIt