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.

Weston Ruter

<p>This plugin allows you to create text-to-speech podcasts of your posts, with the content from embedded URLs supplied by Readability’s Parser API. It aims to be a open self-hosted re-incarnation of defunct <a href="http://soundgecko.com/" rel="nofollow ugc">SoundGecko</a> service.</p>
<p>When a <a href="https://www.readability.com/developers/api/parser" rel="nofollow ugc">Readability Parser API</a> key is supplied, a post which gets saved with a bare URL as its content will have this content prepended with the content that Readability extracts from the page at that URL. This allows you to import an article’s full contents into your podcast just by saving a post with a URL in its content (e.g. by sharing an article URL to your blog via Jetpack’s <a href="http://jetpack.me/support/post-by-email/" rel="nofollow ugc">post by email</a>).</p>
<p>In addition to supplying a URL for the content you want in the podcast, you can also just add the content directly to the post itself without any corresponding article URL, and this content will be converted to TTS (text-to-speech) audio instead. You can also, of course, attach an MP3 to a post and it will be used for the podcast instead of TTS-generated audio from the post content or enclosed URL.</p>
<p>The TTS audio is generated by a Mac regularly connected to the Internet (e.g. your Mac). It generates the article audio MP3 using the OS X <code>say</code> command. You can configure the voice and the rate for the speech audio generated. (Use of the OS X voice is not required; an alternative TTS solution may be devised instead.) The MP3 gets attached to its corresponding post, being prepended to the post content by means of an <code>audio</code> shortcode.</p>
<p>A new <code>listenability</code> permalink endpoint is introduced which contains the text content of a given post presented in a textual form which can be ready by a text-to-speech (TTS) engine. It is specifically designed to be read by the speech synthesis engine in OS X as it includes <a href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/SpeechSynthesisProgrammingGuide/FineTuning/FineTuning.html" rel="nofollow ugc">embedded speech commands</a>. The RSS2 feed includes a new <code>enclosure</code> element containing the URL for this endpoint with the ad hoc content type <code>text/plain+embedded-speech-commands</code>.</p>
<h4>Restrictions</h4>
<p>Note that the Readability Parser API is freely available for <em>non-commercial use</em>. The article content fetched by Readability and inserted into your posts is copyrighted by their respective authors (attribution gets included in the post content). Likewise, the speech audio generated by OS X is for <a href="http://apple.stackexchange.com/a/43300/28836" rel="nofollow ugc">personal, non-commercial use</a>. It is therefore key that there be <em>no advertising</em> employed on the WordPress install that uses this plugin. Because of the non-commercial and personal usage imposed by these dependencies, it is recommended that this plugin be used on your own personal dedicated podcast blog that is set to block search engines, that is unless you have obtained a commercial Readability license and are not using TTS audio generated by OS X.</p>
<h4>Dependencies</h4>
<ul>
<li><a href="https://www.readability.com/developers/api/parser" rel="nofollow ugc">Readability Parser API</a> key. This can also be supplied in <code>wp-config.php</code> via the <code>READABILITY_PARSER_API_KEY</code> constant.</li>
<li>Mac computer (OS X) that is regularly connected to the Internet (e.g. your computer), with <a href="http://sox.sourceforge.net/" rel="nofollow ugc">SoX</a> installed (e.g. via <a href="http://brew.sh/" rel="nofollow ugc">Homebrew</a>).</li>
<li>(Optional) <a href="http://jetpack.me/" rel="nofollow ugc">Jetpack</a> plugin, for the <a href="http://jetpack.me/support/post-by-email/" rel="nofollow ugc">Post by Email</a> feature.</li>
</ul>
<h4>Extensions</h4>
<p>The plugin includes actions and filters primarily for customizing the formatting of the text for the text-to-speech engine. You may use these hooks to improve how the TTS engine reads the text on a given site, for instance by stripping out footnotes or removing image captions. For an example of such a plugin, see the <a href="https://gist.github.com/westonruter/dfaa45b026a2bb6a36e0" rel="nofollow ugc">sample plugin which improves formatting of Wikipedia articles</a>.</p>
<p>See the <a href="https://github.com/westonruter/wp-listenability/tree/master/php" rel="nofollow ugc">plugin source code</a> to see which additional plugin hooks are available.</p>
<h4>Contributing</h4>
<p>This plugin is <a href="https://github.com/westonruter/wp-listenability" rel="nofollow ugc">developed on GitHub</a>. Report <a href="https://github.com/westonruter/wp-listenability/issues" rel="nofollow ugc">issues</a> there. <a href="https://github.com/westonruter/wp-listenability/pulls" rel="nofollow ugc">Pull requests</a> welcome.</p>
<h4>License</h4>
<p>GPLv2 license. Copyright 2015 by Weston Ruter.</p>


Listenability

Create a text-to-speech podcast of your posts, with the content from embedded URLs supplied by Readability. Open re-incarnation of SoundGecko.

Speakable vs Listenability