#86 - Free & Simple Text-To-Speech v0.1

Add a button which allows visitors to listen to your article.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #86 v0.1 💙 VOICE TO TEXT BUTTON -->
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const textDiv = document.querySelector('[ms-code-text-to-speech="text"]');
    const speakButton = document.querySelector('[ms-code-text-to-speech="button"]');
    let utterance = new SpeechSynthesisUtterance();

    speakButton.addEventListener('click', () => {
        if(speechSynthesis.speaking || speechSynthesis.paused) {
            speechSynthesis.cancel(); // stops current speech
        } else {
            utterance.text = textDiv.innerText;

            speechSynthesis.speak(utterance); // starts speaking
        }
    });
});
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Easily add a Text-to-speech Button to your Webflow Site (FREE)

Memberscripts needed

https://www.memberstack.com/scripts/86-free-simple-text-to-speech

Tutorial

Cloneable

Why/When would need to add a Text-to-speech Button to your Webflow Site?

Improve accessibility for users who may be visually impaired.

Accessibility is extremely important when building a website and one way to offer a more accessible experience to your users is by providing text-to-speech functionality for those who may have a difficult time reading.

This guide will help you implement a button that uses visitors’ devices’ built-in TTS functionality to read the content on your site. That means that it’s really easy to implement and you don’t have to spend any money on it.

Adding a text-to-speech button to a Webflow site

To add a text-to-speech button to a Webflow site, we’re going to use MemberScript #86 – Free & Simple Text-to-Speech. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create a button and style it however you want. Then select that button and add the following attribute to it:

ms-code-text-to-speech=”button”

Now select the content that you want to be read out loud – you can even select the entire page. Add the following attribute to it:

ms-code-text-to-speech=”text”

Making it work

Now that you’ve got your button built and styled and you’ve added the required attributes to the button and the content, all you need to do is add the MemberScript #86 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test text-to-speech button on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you easily add a text-to-speech button to improve the accessibility of your Webflow site.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?

#86 - Free & Simple Text-To-Speech v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Easily add a Text-to-speech Button to your Webflow Site (FREE)

Memberscripts needed

Tutorial

Cloneable

Why/When would need to add a Text-to-speech Button to your Webflow Site?

Adding a text-to-speech button to a Webflow site

Setting it up

Making it work

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources