I published a Text-to-Speech Widget in the Marketplace

The implementation of text-to-speech (TTS) and speech recognition features in modern applications has gained popularity. This blog post aims to explain how to integrate a text-to-speech widget in Mendix, utilizing the SpeechSynthesis and SpeechRecognition APIs.

Published in

Mendix Community

3 min readMar 28, 2023

I Published a Text-to-Speech Widget in the Marketplace (Banner Image): An android, whose voice is depicted as soundwaves in the air — I Published a Text-to-Speech Widget in the Marketplace - Image description: An android, whose voice is depicted as soundwaves in the air

The SpeechSynthesis API is a component of the Web Speech API that converts text to spoken audio on websites. It gives developers control over voice, pitch, speech speed, and language. To incorporate this in Mendix, a custom widget can be designed that utilizes the SpeechSynthesis API for converting text to speech.

Download the Widget from the Marketplace

https://marketplace.mendix.com/link/component/204739

How it works

Here’s an example of how you can use the SpeechSynthesis API in Mendix:

To create a new instance of the SpeechSynthesis API, the window.speechSynthesis object is used. The speak function accepts text and creates a new SpeechSynthesisUtterance object with the text. The speech synthesis process is initiated by calling the synth.speak method with the utterance.

The SpeechRecognition API is another part of the Web Speech API that helps websites recognize spoken audio and convert it into text. To integrate this into Mendix, another custom widget can be created, utilizing the SpeechRecognition API for recognizing speech and converting it into text.

Here’s an example of how you can use the SpeechRecognition API in Mendix:

This code uses the webkitSpeechRecognition constructor to establish a new instance of the SpeechRecognition API. The recognition.onresult event logs the recognized speech to the console, and the recognition.start method is called to initiate the speech recognition process.

By merging these two APIs, it is possible to create a TTS widget in Mendix that converts text to speech, recognizes speech, and converts it into text. This feature can be beneficial for various applications, such as education, language learning, and more.

In conclusion

In conclusion, the SpeechSynthesis and SpeechRecognition APIs are potent tools that can be used to add TTS and speech recognition functionality to Mendix applications. By utilizing these APIs, a TTS widget has been developed, to enhance the accessibility and user-friendliness of Mendix applications.

Speech to Text Widget

Writing is not simple, primarily when you must type thousands of words every day. The more typing, the more…

medium.com

How to work with JavaScript and Mendix

During the middle of lockdown, I had a lot of time on my hands, and like many people, I spent most of that time binge…

medium.com

SpeechRecognition - Web APIs | MDN

In our simple Speech color changer example, we create a new SpeechRecognition object instance using the…

developer.mozilla.org

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? Join us in our Slack community channel.