About this plugin
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:
- The plugin filters post content to inject a player bar (or use the Gutenberg block)
- JavaScript extracts article text and splits it into sentences
- Each sentence is spoken using the Web Speech API
- Sentence-by-sentence playback avoids Chrome’s known timeout bug
Source Code and Development
This plugin is fully GPL. The maintained development location is:
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:
npm install npm run build
This runs wp-scripts build --webpack-src-dir=src/blocks --output-path=build/blocks. The npm run start command provides a development watch mode.