Speakable

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:

• Play / Pause / Stop controls
• Adjustable playback speed (0.75x – 2x)
• Progress bar with sentence counter
• Voice, pitch, volume, and speed settings from the admin dashboard
• Enable/disable per post type (Posts, Pages, Products, etc.)
• Customizable button color with live preview
• Gutenberg block — place the player anywhere in your content
• Sticky mini-player that follows users while scrolling
• Mobile-optimized with large touch targets
• Accessible: ARIA labels, roles, keyboard navigation, and live regions
• Zero external dependencies — no third-party scripts, fonts, or services

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:

1. The plugin filters post content to inject a player bar (or use the Gutenberg block)
2. JavaScript extracts article text and splits it into sentences
3. Each sentence is spoken using the Web Speech API
4. Sentence-by-sentence playback avoids Chrome’s known timeout bug

Source Code and Development

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:

• Block editor source: src/blocks/speakable-player/index.js and src/blocks/speakable-player/editor.css
• Block render template (server-side): src/blocks/speakable-player/render.php
• Block metadata: src/blocks/speakable-player/block.json
• All PHP classes are unminified and live under includes/
• All admin/frontend CSS and JS are unminified and live under assets/

The contents of build/blocks/speakable-player/ are produced from src/blocks/speakable-player/ using @wordpress/scripts.

To regenerate the build output:

This runs wp-scripts build --webpack-src-dir=src/blocks --output-path=build/blocks. The npm run start command provides a development watch mode.