Weston Ruter

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


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.

beyondwords

Stuart McAlpine

<p>BeyondWords is the AI voice platform that brings frictionless audio publishing to newsrooms, writers, and businesses. Automatically create audio versions of WordPress posts and pages and embed via a customizable player. Lifelike neural voices and customizable text-to-speech algorithms deliver realistic speech that keeps listeners coming back for more.</p>
<h3>GET STARTED WITH BEYONDWORDS</h3>
<p>To get started with BeyondWords, please <a href="https://beyondwords.io/book-a-demo/?utm_source=wordpress&utm_medium=referral&utm_campaign=&utm_content=plugin" rel="nofollow ugc">book a demo</a> with our team.</p>
<p>We’ll walk you through the platform, discuss your goals, and help set up your account so you can begin converting your WordPress content into audio.</p>
<p>Any questions? Visit our website <a href="https://beyondwords.io/?utm_source=wordpress&utm_medium=referral&utm_campaign=&utm_content=plugin" rel="nofollow ugc">https://beyondwords.io</a> or email <a href="mailto:support@beyondwords.io" rel="nofollow ugc">support@beyondwords.io</a>.</p>
<h3>Key features of our text-to-speech plugin for WordPress:</h3>
<ul>
<li>Easily pick which pages and posts are converted into audio</li>
<li>Audio is automatically created and embedded via our customizable player</li>
<li>Powerful and versatile player options to fit your web and mobile experience.</li>
</ul>
<h3>Key features of your BeyondWords dashboard:</h3>
<ul>
<li>Lifelike AI voices enhanced by customizable NLP algorithms</li>
<li>Create or edit audio in the Text-to-Speech Editor</li>
<li>Curate custom playlists and podcast feeds</li>
<li>Embed audio manually or share via URL</li>
<li>Monitor engagement through analytics</li>
<li>Manage audio through the audio CMS</li>
<li>Monetize your audio with audio ads</li>
</ul>
<p>You are just minutes away from engaging audiences with AI audio. Join the hundreds of WordPress publishers already using our text-to-speech plugin and platform to make the most of their news articles, reports, guides, and more.</p>
<p>If you have any questions, feedback, or issues, please email <a href="mailto:support@beyondwords.io" rel="nofollow ugc">support@beyondwords.io</a>.</p>
<h3>CUSTOMER TESTIMONIAL</h3>
<blockquote>
<p>“We’ve been using BeyondWords to convert our articles into audio for over a year. Overall, we are very impressed with the service. The quality of the audio is consistently the best we’ve found available, the plugin and dashboard provides all the functionality we need, processing and delivery of the audio is fast and the players fit nicely on our page. We’ve had great customer feedback and the team have been quick to make adjustments based on our suggestions.”</p>
<p>— Kenneth Creamer, Creamer Media</p>
</blockquote>
<h3>ADVANCED TEXT-TO-SPEECH</h3>
<p>Looking for the best text-to-speech plugin on WordPress?</p>
<p>Using methods like natural language processing (NLP), BeyondWords’ unique text processing algorithms optimally convert your content into speech synthesis markup language (SSML). This enables AI voices to effectively pronounce elements that other platforms can struggle with, such as names, numbers, and dates, as well as filtering out elements that shouldn’t be read aloud. You can even add aliases to ensure everything is read exactly how you want it.</p>
<p>BeyondWords gives you access to neural voices from Google Cloud, Amazon Web Services, and Microsoft Azure (500+ voices across 140+ language locales).</p>
<p>You can also get access to premium neural voices — voice clones of professional voice actors that are exclusive to BeyondWords. Users have the option to develop a completely bespoke custom voice using our voice cloning service.</p>
<p>The result is naturalistic spoken-word audio content that engages your target audience — at a fraction of the cost of human recordings.</p>
<h3>EFFORTLESS DISTRIBUTION</h3>
<p>BeyondWords makes it easy to reach new audiences and grow your listenership. As well as auto-embedding audio players to your WordPress site, you can embed your audio manually or share via URL. You can even download your audios as mp3 files.</p>
<p>This includes content created automatically with our WordPress text-to-speech plugin, as well as content created manually with the Text-to-Speech Editor — perfect for audio newsletters.</p>
<p>Users can even create custom playlists that keep listeners listening for longer. These can be embedded, shared via URL, or even distributed via podcast feed. That means you can reach audiences through platforms like Apple Podcasts and Spotify.</p>
<h3>ANALYTICS AND MONETIZATION</h3>
<p>You get access to project analytics, which means you can track listener engagement at the project level through your BeyondWords dashboard. Users can also get access to audio analytics, as well as Google Analytics and Google Tag Manager integrations.</p>
<p>You can even leverage your listenership through audio advertising. Use our self-serve audio advertising feature to create your own campaigns or use VAST (video ad serving template) to connect a programmatic advertising platform, such as Google Ad Manager.</p>


BeyondWords – Text-to-Speech

BeyondWords is the AI voice platform that brings frictionless audio publishing to newsrooms, writers, and businesses.

Spoken Word vs BeyondWords – Text-to-Speech