Title: Spoken Word
Author: Weston Ruter
Published: 21. jaan 2018
Last modified: 21. jaan 2018
---
Search plugins
This plugin **hasn’t been tested with the latest 3 major releases of WordPress**.
It may no longer be maintained or supported and may have compatibility issues when
used with more recent versions of WordPress.
# Spoken Word
By [Weston Ruter](https://profiles.wordpress.org/westonruter/)
[Download](https://downloads.wordpress.org/plugin/spoken-word.1.0.1.zip)
* [Details](https://et.wordpress.org/plugins/spoken-word/#description)
* [Reviews](https://et.wordpress.org/plugins/spoken-word/#reviews)
* [Development](https://et.wordpress.org/plugins/spoken-word/#developers)
[Support](https://wordpress.org/support/plugin/spoken-word/)
## Description
Add text-to-speech (TTS) to content, with playback controls, read-along highlighting,
multi-lingual support, and settings for rate, pitch, and voice.
* Uses local text-to-speech engine in user’s browser. Directly interfaces with
the `speechSynthesis` browser API. Zero external requests or dependencies.
* Words are selected/highlighted as they are being spoken to allow you to read
along.
* Skips speaking elements that should not be read, including footnote superscripts(
the `sup` element).
* Pauses of different length added are between headings versus paragraphs.
* Controls remain in view during playback, with each the current text being spoken
persistently being scrolled into view. (Requires browser support for `position:
sticky`.)
* Back/forward controls allow you to skip to the next paragraph; when not speaking,
the next paragraph to read will be selected entirely.
* Select text to read from that point; click on text during speech to immediately
change position.
* Multi-lingual support, allowing embedded text with `[lang]` attribute to be spoken
by the appropriate voice (assuming the user has it installed).
* 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.
* Hit escape to pause during playback.
* Voice preferences are persistently stored in `localStorage`, with changes synced
across windows (of a given site).
* Ability to use JS in standalone manner (such as in bookmarklet).
* 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) `speechSynthesis` 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.
[Try it out](https://westonruter.github.io/spoken-word/test/example.html) on standalone
example with some test content.
#### Theme Config
The settings for Spoken Word are presented in an HTML5 `dialog` element. For browsers
that do not yet support this feature, the plugin bundles the [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill).
The polyfill is only included if it is detected the browser does not support `dialog`
natively. The inclusion of the polyfill can be disabled by adding the following
to your theme or plugin:
```
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
```
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:
```
@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 );
}
}
```
#### Internals
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`
contentSelector`:
```
( () => {
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 );
} )();
```
The `spokenWord.initialize()` function takes an object as its argument which can
have the following properties:
```
* @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.
```
The dialog and the controls are rendered using [Preact](https://preactjs.com/).
For a list of all the modules used by this plugin, see the [package.json](https://github.com/westonruter/spoken-word/blob/master/package.json).
This plugin is [developed on GitHub](https://github.com/westonruter/spoken-word)
where the source can be viewed. Please [report issues](https://github.com/westonruter/spoken-word/issues)
there. Pull requests welcome. The `spoken-word` package is also [published on npm](https://www.npmjs.com/package/spoken-word).
## Screenshots
* [[
* Words are highlighted (selected) as they are spoken.
* [[
* Change the rate, pitch, and voices used in speech.
* [[
* Skip ahead to the desired paragraph with controls or via selecting with cursor.
## Reviews
### [Thank you!](https://wordpress.org/support/topic/thank-you-2170/)
[askdavidchen](https://profiles.wordpress.org/askdavidchen/) 8. nov. 2019 1 reply
Thank you, this plug very great. everything is OK. But currently version only support
English engine and only running in PC. android no effect.
### [Works as it should](https://wordpress.org/support/topic/works-as-it-should-63/)
[Wnd](https://profiles.wordpress.org/wnd/) 2. mai 2019
Install, activate, and done! Will give it a 5 star rating if it’s possible to customize
some options.
### [Very nice plugin](https://wordpress.org/support/topic/very-nice-plugin-607/)
[Beate Ziebell](https://profiles.wordpress.org/beatea/) 25. veebr 2019
Thank you for the plugin. Since my Website works with the eleven40 Pro on Genesis
theme, the plugin first did not show up. My solution was to just add a div in the
blog/page post like: , since the
post itself did only have a div with the itemprop=”text”.
### [It just worked.](https://wordpress.org/support/topic/it-just-worked-6/)
[Mick Holton](https://profiles.wordpress.org/mick554/) 6. dets. 2018
I installed it, activated it then listened to the results. Very simple and very
impressed.
### [Prima en handig](https://wordpress.org/support/topic/prima-en-handig/)
[tonhendriks](https://profiles.wordpress.org/tonhendriks/) 29. sept 2018
Makkelijk te gebruiken, plaatst zich automatisch bovenaan de pagina, wie het voorgelezen
wil hebben kan dat doen. Veeg een tekst aan en dan wordt vanaf de start van de selectie
voorgelezen.
### [Do you have, please, a tutoria to add Spanish and Portuguese Languages?](https://wordpress.org/support/topic/do-you-have-please-a-tutoria-to-add-spanish-and-portuguese-languages/)
[tehealing](https://profiles.wordpress.org/tehealing/) 22. veebr 2018
Do you have, please, a tutoria to add Spanish and Portuguese Languages?
[ Read all 7 reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/)
## Contributors & Developers
“Spoken Word” is open source software. The following people have contributed to
this plugin.
Contributors
* [ Weston Ruter ](https://profiles.wordpress.org/westonruter/)
[Translate “Spoken Word” into your language.](https://translate.wordpress.org/projects/wp-plugins/spoken-word)
### Interested in development?
[Browse the code](https://plugins.trac.wordpress.org/browser/spoken-word/), check
out the [SVN repository](https://plugins.svn.wordpress.org/spoken-word/), or subscribe
to the [development log](https://plugins.trac.wordpress.org/log/spoken-word/) by
[RSS](https://plugins.trac.wordpress.org/log/spoken-word/?limit=100&mode=stop_on_copy&format=rss).
## Changelog
#### 1.0.1 (2018-01-21)
Disable functionality in Android and iOS devices by default.
#### 1.0.0 (2018-01-20)
Initial release.
## Meta
* Version **1.0.1**
* Last updated **8 aastat ago**
* Active installations **100+**
* WordPress version ** 4.7 or higher **
* Tested up to **4.9.29**
* PHP version ** 5.4 or higher **
* Language
* [English (US)](https://wordpress.org/plugins/spoken-word/)
* Tags
* [audio](https://et.wordpress.org/plugins/tags/audio/)[speech synthesis](https://et.wordpress.org/plugins/tags/speech-synthesis/)
[text to speech](https://et.wordpress.org/plugins/tags/text-to-speech/)[tts](https://et.wordpress.org/plugins/tags/tts/)
[voice](https://et.wordpress.org/plugins/tags/voice/)
* [Advanced View](https://et.wordpress.org/plugins/spoken-word/advanced/)
## Ratings
4.7 out of 5 stars.
* [ 5 5-star reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/?filter=5)
* [ 2 4-star reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/?filter=3)
* [ 0 2-star reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/?filter=2)
* [ 0 1-star reviews ](https://wordpress.org/support/plugin/spoken-word/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/spoken-word/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/spoken-word/reviews/)
## Contributors
* [ Weston Ruter ](https://profiles.wordpress.org/westonruter/)
## Support
Got something to say? Need help?
[View support forum](https://wordpress.org/support/plugin/spoken-word/)