glowdopera

<p><strong>Speechable</strong> transforms your WordPress content into natural-sounding audio using AI-powered text-to-speech technology. Speechable uses Piper TTS, an open-source neural text-to-speech engine that runs in your browser.</p>
<h4>Third-Party Service</h4>
<p>This plugin uses the following third-party services for text-to-speech functionality:</p>
<p><strong>Piper TTS Web Library</strong></p>
<ul>
<li>Service Provider: <a href="https://github.com/Mintplex-Labs/piper-tts-web" rel="nofollow ugc">Mintplex Labs</a></li>
<li>Library CDN: jsDelivr (https://cdn.jsdelivr.net/npm/@mintplex-labs/piper-tts-web)</li>
<li>ONNX Runtime CDN: Cloudflare (https://cdnjs.cloudflare.com/ajax/libs/onnxruntime-web)</li>
<li>WASM Phonemizer CDN: jsDelivr (https://cdn.jsdelivr.net/npm/@diffusionstudio/piper-wasm)</li>
<li>Voice Models: Downloaded from <a href="https://huggingface.co/diffusionstudio/piper-voices" rel="nofollow ugc">Hugging Face</a></li>
<li>Terms of Service: <a href="https://github.com/Mintplex-Labs/piper-tts-web/blob/main/LICENSE" rel="nofollow ugc">MIT License</a></li>
</ul>
<p><strong>Whisper (Word Timestamps)</strong></p>
<ul>
<li>Service Provider: <a href="https://huggingface.co/docs/transformers.js" rel="nofollow ugc">Hugging Face Transformers.js</a></li>
<li>Library CDN: jsDelivr (https://cdn.jsdelivr.net/npm/@huggingface/transformers)</li>
<li>Model: Xenova/whisper-tiny.en (~75MB, downloaded on first use)</li>
<li>Purpose: Provides accurate word-level timestamps for synchronized highlighting</li>
<li>Terms of Service: <a href="https://github.com/huggingface/transformers.js/blob/main/LICENSE" rel="nofollow ugc">Apache 2.0 License</a></li>
</ul>
<p><strong>What data is transmitted:</strong></p>
<ul>
<li>The TTS library and ONNX runtime are loaded from CDN when generating audio</li>
<li>Voice model files are downloaded from Hugging Face when first using a voice</li>
<li>Whisper model is downloaded for word timestamp extraction (first use only)</li>
<li>Your content text is processed locally in your browser and is NOT sent to any external server</li>
<li>Once downloaded, all resources are cached locally in your browser</li>
</ul>
<p><strong>Why external resources are required:</strong></p>
<p>The text-to-speech engine requires machine learning runtime (ONNX) and voice models that are too large to bundle with the plugin. These are loaded on-demand from CDN services, similar to how Google Fonts or other web services work. This is a service-based approach that keeps the plugin lightweight while providing high-quality AI voices.</p>
<h4>Key Features</h4>
<ul>
<li><strong>AI-Powered Voices</strong> – Natural-sounding speech using Piper TTS neural network models</li>
<li><strong>Accurate Word Highlighting</strong> – Whisper-powered word timestamps for precise synchronization</li>
<li><strong>12 Languages</strong> – English, German, French, Spanish, Italian, Portuguese, Dutch, Polish, Russian, Chinese, Japanese, Korean</li>
<li><strong>Customizable Player</strong> – Match your theme with custom colors and styling</li>
<li><strong>Download Audio</strong> – Let visitors download audio files for offline listening</li>
<li><strong>Voice Presets</strong> – Quick effects like Radio, Stadium, Cave, Chipmunk, Robot, and more</li>
<li><strong>Free</strong> – No premium version, no limits, no hidden costs</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Go to Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Speechable to configure your preferences</li>
<li>Edit any post and click “Generate Audio” in the sidebar</li>
<li>The audio player automatically appears on your published posts</li>
</ol>
<h4>Voice Presets</h4>
<p>Transform your audio with one-click presets:</p>
<ul>
<li>Default – Natural voice</li>
<li>Radio – Broadcast quality</li>
<li>Stadium – Echo effect</li>
<li>Cave – Deep reverb</li>
<li>Chipmunk – High-pitched fun</li>
<li>Deep – Low bass voice</li>
<li>Robot – Mechanical tone</li>
<li>Telephone – Phone quality</li>
<li>Megaphone – Announcement style</li>
<li>Giant – Booming voice</li>
<li>Fairy – Magical high voice</li>
<li>Narrator – Audiobook style</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li><strong>Bloggers</strong> – Give readers an audio option</li>
<li><strong>News Sites</strong> – Accessibility for all visitors</li>
<li><strong>Educational Content</strong> – Help students learn</li>
<li><strong>Accessibility</strong> – Support visually impaired users</li>
<li><strong>Podcasters</strong> – Quick audio versions of written content</li>
</ul>
<h4>Privacy</h4>
<p>Your content is processed locally in the browser. Text is not sent to external servers. Voice models are downloaded once and cached locally.</p>
<h3>Usage</h3>
<h4>Getting Started</h4>
<ol>
<li>After activation, go to <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Speechable</strong> to configure your default options</li>
<li>Select your preferred language and voice</li>
<li>Choose which post types should have audio (posts, pages, etc.)</li>
<li>Customize the player colors to match your theme</li>
</ol>
<h4>Generating Audio for a Post</h4>
<p><strong>Method 1: Block Editor (Single Post)</strong></p>
<ol>
<li>Edit any post or page in the WordPress block editor</li>
<li>Look for the <strong>“Speechable”</strong> panel in the right sidebar (under Document settings)</li>
<li>Select your preferred voice and quality settings</li>
<li>Click <strong>“Generate Audio”</strong> and wait for processing</li>
<li>Once complete, you can preview the audio before publishing</li>
<li>Publish or update your post – the audio player will appear automatically</li>
</ol>
<p><strong>Method 2: Posts List (Quick Access)</strong></p>
<ol>
<li>Go to <strong>Posts <span aria-hidden="true" class="wp-exclude-emoji">→</span> All Posts</strong></li>
<li>Hover over any post to see the <strong>“Audio”</strong> button in the row actions</li>
<li>Click it to open the audio generation modal</li>
<li>Configure settings and click <strong>“Generate”</strong></li>
<li>The audio will be saved to that post</li>
</ol>
<h4>Configuring Settings</h4>
<p><strong>Voice Settings</strong></p>
<ul>
<li><strong>Language</strong> – Choose from 12 supported languages</li>
<li><strong>Voice</strong> – Select a voice for the chosen language (preview available)</li>
<li><strong>Quality</strong> – Low (faster), Medium (balanced), or High (best sync accuracy)</li>
<li><strong>Whisper Model</strong> – Controls word timestamp accuracy (Tiny is fastest, Small is more accurate)</li>
</ul>
<p><strong>Voice Presets</strong></p>
<p>Click any preset to quickly apply pitch and reverb effects:</p>
<ul>
<li>Default, Warm, Bright, Radio, Narrator, Podcast, Deep, Soft, Room, Hall, Telephone, Vintage</li>
</ul>
<p><strong>Display Settings</strong></p>
<ul>
<li><strong>Post Types</strong> – Enable audio for posts, pages, or custom post types</li>
<li><strong>Player Position</strong> – Show player before or after content</li>
<li><strong>Word Highlighting</strong> – Enable/disable word-by-word highlighting during playback</li>
<li><strong>Auto-scroll</strong> – Automatically scroll to keep highlighted word visible</li>
</ul>
<p><strong>Player Appearance</strong></p>
<ul>
<li>Customize background, text, button, progress bar, and highlight colors</li>
<li>Adjust border radius for rounded or square corners</li>
<li>Live preview shows your changes instantly</li>
</ul>
<h4>Managing Audio</h4>
<ul>
<li><strong>Regenerate</strong> – Click “Regenerate” in the editor panel to create new audio with different settings</li>
<li><strong>Delete</strong> – Remove audio from a post using the “Delete” button</li>
<li><strong>Download</strong> – Visitors can download the audio file using the player’s download button</li>
</ul>
<h4>Tips for Best Results</h4>
<ol>
<li><strong>Use High quality</strong> for important content where word sync matters</li>
<li><strong>Preview voices</strong> in Settings before generating to find the best match</li>
<li><strong>Shorter posts</strong> generate faster – consider breaking very long content into parts</li>
<li><strong>First generation</strong> takes longer as voice models are downloaded and cached</li>
<li><strong>Word highlighting</strong> works best with standard theme content areas</li>
</ol>
<h3>Credits</h3>
<h4>Core Technologies</h4>
<ul>
<li>
<p><strong>Piper TTS</strong> – <a href="https://github.com/rhasspy/piper" rel="nofollow ugc">rhasspy/piper</a> by Mike Hansen<br />
Fast, local neural text-to-speech system (MIT License)</p>
</li>
<li>
<p><strong>Piper TTS Web</strong> – <a href="https://github.com/Mintplex-Labs/piper-tts-web" rel="nofollow ugc">Mintplex-Labs/piper-tts-web</a> v1.0.4<br />
Browser-compatible Piper TTS implementation (MIT License)</p>
</li>
<li>
<p><strong>OpenAI Whisper</strong> – <a href="https://github.com/openai/whisper" rel="nofollow ugc">openai/whisper</a><br />
Robust speech recognition for word-level timestamps (MIT License)</p>
</li>
<li>
<p><strong>Transformers.js</strong> – <a href="https://github.com/huggingface/transformers.js" rel="nofollow ugc">huggingface/transformers.js</a> v3.4.1<br />
Run Whisper models in the browser by Xenova (Apache 2.0 License)</p>
</li>
<li>
<p><strong>ONNX Runtime Web</strong> – <a href="https://github.com/microsoft/onnxruntime" rel="nofollow ugc">microsoft/onnxruntime</a><br />
Machine learning inference engine (MIT License)</p>
</li>
<li>
<p><strong>Piper WASM Phonemizer</strong> – <a href="https://github.com/diffusionstudio/piper-wasm" rel="nofollow ugc">diffusionstudio/piper-wasm</a><br />
WebAssembly phonemizer for text processing (MIT License)</p>
</li>
</ul>
<h4>Voice Models</h4>
<ul>
<li>
<p><strong>Piper Voices</strong> – <a href="https://huggingface.co/diffusionstudio/piper-voices" rel="nofollow ugc">diffusionstudio/piper-voices</a><br />
High-quality neural voice models hosted on Hugging Face</p>
</li>
<li>
<p><strong>Whisper Models</strong> – <a href="https://huggingface.co/Xenova" rel="nofollow ugc">Xenova on Hugging Face</a><br />
Optimized Whisper models for browser inference (whisper-tiny.en, whisper-small)</p>
</li>
</ul>
<h4>Infrastructure</h4>
<ul>
<li><strong>jsDelivr CDN</strong> – Fast, reliable CDN for npm packages</li>
<li><strong>Cloudflare CDN</strong> – ONNX Runtime delivery</li>
<li><strong>Hugging Face</strong> – Model hosting and distribution</li>
</ul>
<h4>Design</h4>
<ul>
<li><strong>Lucide Icons</strong> – <a href="https://lucide.dev" rel="nofollow ugc">lucide.dev</a> (ISC License)<br />
Beautiful, consistent icon set</li>
</ul>
<h4>Development</h4>
<ul>
<li><strong>Developer</strong>: <a href="https://tanishmittal.com" rel="nofollow ugc">Tanish Mittal</a></li>
<li><strong>Plugin Architecture</strong>: WordPress standards-compliant</li>
<li><strong>Browser Compatibility</strong>: Modern ES6+ with Web Workers</li>
</ul>


Speechable

Convert your WordPress posts to audio with AI-powered text-to-speech. Works in the browser with word highlighting.

Weston Ruter

<p>Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.</p>
<ul>
<li>Uses local text-to-speech engine in user’s browser. Directly interfaces with the <code>speechSynthesis</code> browser API. Zero external requests or dependencies.</li>
<li>Words are selected/highlighted as they are being spoken to allow you to read along.</li>
<li>Skips speaking elements that should not be read, including footnote superscripts (the <code>sup</code> element).</li>
<li>Pauses of different length added are between headings versus paragraphs.</li>
<li>Controls remain in view during playback, with each the current text being spoken persistently being scrolled into view. (Requires browser support for <code>position:sticky</code>.)</li>
<li>Back/forward controls allow you to skip to the next paragraph; when not speaking, the next paragraph to read will be selected entirely.</li>
<li>Select text to read from that point; click on text during speech to immediately change position.</li>
<li>Multi-lingual support, allowing embedded text with <code>[lang]</code> attribute to be spoken by the appropriate voice (assuming the user has it installed).</li>
<li>Settings for changing the default voice (for each language), along with settings for the rate of speech and its pitch. (Not supported by all engines.) Changes can be made while speaking.</li>
<li>Hit escape to pause during playback.</li>
<li>Voice preferences are persistently stored in <code>localStorage</code>, with changes synced across windows (of a given site).</li>
<li>Ability to use JS in standalone manner (such as in bookmarklet).</li>
<li>Known to work in the latest desktop versions of Chrome, Firefox, and Safari. (Tested on OSX.) It does not work reliably in mobile/touch browsers on Android or iOS, apparently due both to the (still experimental) <code>speechSynthesis</code> API not being implemented well enough on those systems and/or programmatic range selection does not work the same way as on desktop. For these reasons, the functionality is disabled by default on mobile operating systems.</li>
</ul>
<p><a href="https://westonruter.github.io/spoken-word/test/example.html" rel="nofollow ugc">Try it out</a> on standalone example with some test content.</p>
<h4>Theme Config</h4>
<p>The settings for Spoken Word are presented in an HTML5 <code>dialog</code> element. For browsers that do not yet support this feature, the plugin bundles the <a href="https://github.com/GoogleChrome/dialog-polyfill" rel="nofollow ugc">dialog-polyfill</a>. The polyfill is only included if it is detected the browser does not support <code>dialog</code> natively. The inclusion of the polyfill can be disabled by adding the following to your theme or plugin:</p>
<pre>
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
</pre>
<p>For themes that have a sticky header (such as the nav menu in Twenty Seventeen) you may need to add some additional CSS to ensure that the sticky-positioned playback controls do not get hidden behind the sticky header. For example in Twenty Seventeen, you can add the following to the Custom CSS in the Customizer:</p>
<pre>
@media screen and (min-width: 782px) {
    body:not(.admin-bar) .spoken-word--active {
        top: calc( 0.5em + 70px );
    }
    body.admin-bar .spoken-word--active {
        top: calc( 0.5em + 32px + 70px );
    }
}
</pre>
<h4>Internals</h4>
<p>A bookmarklet can be used to load the Spoken Word functionality into any site, even non-WordPress sites where the plugin is not installed. The key is to use the appropriate <code>contentSelector</code>:</p>
<pre>
( () => {
    const link = document.createElement( 'link' );
    link.rel = 'stylesheet';
    link.href = 'https://unpkg.com/spoken-word/css/style.css';
    document.head.appendChild( link );

    const script = document.createElement( 'script' );
    script.src = 'https://unpkg.com/spoken-word/dist/spoken-word.js';
    script.addEventListener( 'load', () => {
        spokenWord.initialize( {
            contentSelector: [ /* 👈 Amend as desired. */
                '.hentry',
                '.entry-content',
                '.h-entry',
                '.e-content',
                '[itemprop="articleBody"]',
            ].join( ', ' )
        } );
    } );
    document.head.appendChild( script );
} )();
</pre>
<p>The <code>spokenWord.initialize()</code> function takes an object as its argument which can have the following properties:</p>
<pre>
 * @param {string}  contentSelector         - CSS Selector to find the elements for speaking.
 * @param {Element} rootElement             - Root element within which to look for content.
 * @param {Object}  chunkifyOptions         - Options passed into chunkify.
 * @param {boolean} useDashicons            - Whether to use Dashicons.
 * @param {Object}  defaultUtteranceOptions - Default utterance options when none are supplied from localStorage.
</pre>
<p>The dialog and the controls are rendered using <a href="https://preactjs.com/" rel="nofollow ugc">Preact</a>. For a list of all the modules used by this plugin, see the <a href="https://github.com/westonruter/spoken-word/blob/master/package.json" rel="nofollow ugc">package.json</a>.</p>
<p>This plugin is <a href="https://github.com/westonruter/spoken-word" rel="nofollow ugc">developed on GitHub</a> where the source can be viewed. Please <a href="https://github.com/westonruter/spoken-word/issues" rel="nofollow ugc">report issues</a> there. Pull requests welcome. The <code>spoken-word</code> package is also <a href="https://www.npmjs.com/package/spoken-word" rel="nofollow ugc">published on npm</a>.</p>


Spoken Word

Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.

Speechable vs Spoken Word