honzanovacek / Readivo

Readivo Audio Player allows you to add an audio version of your WordPress posts and pages using the Readivo text-to-speech embed script.
The plugin provides a simple integration with minimal configuration:
• Insert the player manually using the shortcode [readivo] 
• Add the player anywhere in content using the Readivo Player Gutenberg block 
• Automatically insert the player at the top or bottom of posts based on plugin settings 
• Limit automatic insertion to posts published after a selected date 
• Assign a specific audio recording to a post using Play ID 
• Customize player text using Default text 
• Control visibility per post using a dedicated editor panel
The player is rendered dynamically on the frontend and does not modify stored post content in the database. 
Audio playback and processing are powered by the Readivo service.
Full documentation: <a href="https://readivo.app/docs" rel="nofollow ugc">https://readivo.app/docs</a> 
Readivo.app homepage: <a href="https://readivo.app" rel="nofollow ugc">https://readivo.app</a> 
Readivo account: <a href="https://app.readivo.app/register" rel="nofollow ugc">https://app.readivo.app/register</a>
<h3>Usage</h3>
Manual insertion (shortcode): 
– Add [readivo] to the content where you want the player. 
– Optional attributes: 
 – Play ID – use a specific audio recording 
 – Default text – custom player text
Gutenberg block: 
– Add the Readivo Player block anywhere in the content. 
– Optional settings: 
 – Play ID – use a specific audio or uploaded MP3 
 – Default text – custom player text 
– If the block is used, automatic insertion is disabled.
Automatic insertion: 
– Enable “Automatically insert a player into each article” in Settings -> Readivo. 
– Choose position (top/bottom) and post types. 
– Set the date from which posts should include the player.
Per-post control: 
– Use the “Readivo” panel in the editor: 
 – Automatically – follow global settings 
 – Show player – force display 
 – Hide player – disable player for this post 
– You can also set: 
 – Play ID – assign specific audio to the post 
 – Default text – customize player text
Priority logic: 
– Gutenberg block → shortcode → automatic insertion 
– Only one player is rendered per post.
<h3>External services</h3>
This plugin loads an external JavaScript embed script from: 
https://cdn.readivo.app/dist/loader.js
The script renders the Readivo audio player and loads the player endpoint: 
https://cdn.readivo.app/player/
What the service is used for: 
Readivo converts article text into audio and provides an audio player that can play the generated audio on the website. It can also be used to play your own audio files or podcasts — simply upload an MP3 file in the Readivo administration and embed it into your article using a Play ID.
What data is sent: 
When audio generation is triggered, the following data may be sent to the Readivo API: 
– page title 
– page URL 
– a stable custom identifier (post ID based identifier) 
– optionally extracted article text for audio generation
When data is sent: 
No data is sent to the Readivo API when the page loads. 
Data is sent only when a visitor starts audio playback and the audio for the article needs to be generated.
Service provider: <a href="https://readivo.app" rel="nofollow ugc">https://readivo.app</a> 
Terms of service: <a href="https://readivo.app/legal/terms" rel="nofollow ugc">https://readivo.app/legal/terms</a> 
Privacy policy: <a href="https://readivo.app/legal/privacy" rel="nofollow ugc">https://readivo.app/legal/privacy</a>
<h3>Features</h3>
• Convert articles to audio using text-to-speech 
• Play your own audio files or podcasts using Play ID 
• Lightweight frontend player 
• Gutenberg block for precise player placement 
• Manual insertion using shortcode [readivo] 
• Automatic insertion into posts and pages 
• Limit automatic insertion to posts published after a selected date 
• Per-post settings: Play ID, Default text, visibility control 
• Smart insertion logic to prevent duplicate players 
• Audio is generated once and served from cache 
• Does not modify stored post content 
• Works with standard WordPress themes

Readivo – Text to Speech Audio Player

Convert WordPress posts and pages into audio using a text-to-speech player. Let visitors listen to your articles with the Readivo audio player.

Weston Ruter

Add text-to-speech (TTS) to content, with playback controls, read-along highlighting, multi-lingual support, and settings for rate, pitch, and voice.
<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>
<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.
<h4>Theme Config</h4>
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:
<pre>
add_filter( 'spoken_word_include_dialog_polyfill', '__return_false' );
</pre>
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:
<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>
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>:
<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>
The <code>spokenWord.initialize()</code> function takes an object as its argument which can have the following properties:
<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>
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>.
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>.

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.

Readivo – Text to Speech Audio Player vs Spoken Word