NEW! Text-To-Speech Player Plugin

[bobmitro]

Hey,

We're preparing to release a free Text-To-Speech Plugin for Publii CMS, but first, we need your help with testing.
This plugin uses the Web Speech API to integrate a text-to-speech player into your posts and pages. It enables content to be read aloud in real-time, making it more accessible for users who prefer listening to content or have difficulties reading.

How It Works:

• The plugin reads post and page content using the Web Speech API.
• One of the biggest challenges with web-based text-to-speech is selecting the right voice, as voices differ significantly between browsers. To simplify things, we did not include the option to choose a voice and instead implemented a mechanism that automatically selects the best default voice for the specified language.
• Supports general languages like EN, DE, PL, and regional variants like en-US, en-AU, etc.

Link to download the plugin: https://getpublii.com/download/plugins/textToSpeechPlayer_1.0.0.zip (30KB)

We'd appreciate your feedback before finalizing the release!

[gpsblues]

Hi Bob,

I tested it locally on the Bespoke theme.
The player is well integrated under the page title, but it does not read the title.

In Italian the effect is a bit metallic and jerky, if compared with the Edge assistant the reading is less natural, but remains well understandable. I tried to adjust the parameters without obtaining a real improvement.

The reading times are estimated correctly: 4.18 real, 4.28 estimated.

Beautiful work!

[candidexmedia]

The player is well integrated under the page title, but it does not read the title.

I tried it on my end, and you just need to change the class to read from to "content":

[bobmitro]

The Web Speech API is a powerful tool, but it has many limitations. One of the main issues is the inconsistency of voices across different browsers. For example, a voice that sounds great in Chrome might sound awful in Firefox, where it can even sound like a whistle! For this reason, we decided to select the default voice for the chosen language instead of allowing the user to select a custom voice.

The voice selection in the plugin is based on several criteria:

• User-Selected Language: The user selects a language from the plugin configuration, including general languages (e.g., en, fr) and regional variants (e.g., en-US, fr-CA).
• Exact Language Match: The plugin first attempts to find a voice that matches the exact language code chosen by the user (e.g., en-US). If a match is found, one of these voices is selected.
• Fallback to General Language: If no exact match is found, the plugin falls back to a more general language match (e.g., en for English).
• Prioritizing Local and Default Voices: After finding matching voices, the plugin prioritizes local voices (those pre-installed on the user’s device) and default voices, ensuring they are selected first if available.

Estimating the total reading time is also challenging, as we aren’t dealing with an audio recording but with an estimation that depends on many factors, such as the reading speed. For example, in Firefox, voices tend to read much faster than in Chrome, which makes time estimation even more difficult.

To address this, we’ve implemented a mechanism that adjusts the speech rate depending on the browser. For example, in Firefox, the reading speed is reduced slightly:

function adjustSpeechRate(speed) {
    const browser = detectBrowser();

    if (browser === "Firefox") {
        return speed * 0.85;  // Adjust the factor as needed
    } else {
        return speed;  // Default speed for Chrome and other browsers
    }
}

Overall, I believe this plugin is a great tool, especially in the context of accessibility. It works by reading content from elements like content__entry, which represent the main content of a post or a page. You can also specify any other container in the plugin options, and it will also read its content.

[candidexmedia]

Thank you for working on this wonderful plugin, and making it free!

I tested it locally on Firefox, Vivaldi, Edge, and Ungoogled Chromium.

I've used a wide range of TTS tools over the last few years, and even implemented one in a Publii site. Here's my feedback:

1. More control over the player

I would love to see a full audio player where people can navigate to the part of the audio that they want, or at least jump forward/back. Here's an example with Read Aloud Widget / Site Narrator, which isn't the prettiest audio player, but illustrates my point:

Additionally, I think it would be preferable if visitors could adjust the speed and pitch to their liking.

2. Better Voices

I'm on Windows, and the built-in voices I have access to are... not the best, to put it nicely... 😂 FireFox comes with read aloud function in the Reader view, which uses the same robotic voices. I assume that it also uses the same API, and can only access the default voices.

For that reason, I typically use a wide range of other tools and apps for TTS. The one I use now is the Read Aloud add-on for Firefox (made by the same devs as the website widget shown above). What I love about that tool is that it can use Google Cloud Voices, Google Translate Voices, some paid options, and even natural-sounding open-source voices like Piper TTS. Here's the repo for the add-on.

I've integrated the Read Aloud Widget / Site Narrator to an existing Publii site, and it can use the browser-provided TTS, as well as Amazon Polly standard, Amazon Polly neural, Google Wavenet standard, and Google Wavenet premium. This ensures a consistent experience for all users

I could probably improve the offline, built-in voices on my system by installing new ones, but that doesn't ensure consistency across platforms for my visitors. It would be nice if people could purchase/subscribe to TTS voice services on their own, and plug in their keys in the Publii plugin options to give their visitors better sounding options, but I don't know if the WebSpeech API is capable of that.

3. Interactive, clickable transcripts

This is more of a wishlist item, but one I wish more TTS tools had the option to follow along the website's text as the voice read it.

Some options, like the Firefox add-on I mentioned, open this interactive, clickable transcript on a separate window:

However, I would love to see something more similar to what Medium is doing with their read aloud feature, where the highlight box follows along inside the actual article:

AblePlayer is another great example, but it's made for video:

Hyperaudio is another neat one, similar to AblePlayer:

[bobmitro]

Great wishlist :), but we're talking here about a plugin that uses the Web Speech API...

[rlesyk]

I'm on a mac and using English and the experience was very good. I have all the browsers but Chrome is the most widely used so I would expect Chrome... at least initially... would be the goto browser for at least the startup phase of this really important plugin. Inaccessibility, well... I can't imagine a world without plugins like this, and I support the Web Speech API and trust that they will implement some of the features described here at the forum. Anyways... it works great on my system and Great Work you guys. :)