外掛標籤
開發者團隊
原文外掛簡介
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:
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:
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.
