TTS – Speak your text!

Written by Balázs Skultéti

Hi, I am a tech guy having big interest and being fond of coding.

Mar 16, 2020

Hi, today we are going to build an app based on a very simple component called Text To Speech. Using this visible component our app will “say” a text we had written into a TextBox. Are you ready?

First step

First create a new project called “TTS” (Text To Speech) and then design your screen a little bit: Let’s change the colour of the title bar by changing the “Title Bar” property of the screen on the right hand side or the title of the screen.

Filling the screen

Well, our screen is totally empty so we have to fill it up with some components.

Adding a Text Box:
A Text Box is a box for the user to enter a text and we need to add this visible component so the user can enter a piece of text to be speak out. After dragging a Text Box from the left side into the screen we can make some design such as resizing our Text Box, changing the text size or the colour,  or the hint. More info

Adding a Button:
A Button is a visible component with the ability of detecting clicks and we need to add this component so our app will speak out the text entered in the Text Box after clicking this button. After dragging a Button from the left side into the screen we can change the Button’s property for example the size, the text, the colour, the font size etc. More info

Adding the TTS (Text To Speech) component:
The Text To Speech component speaks a given text aloud but this is a non-visible component meaning we don’t have a concrete thing to be shown on the screen, it will only speak a text. Let’s add this component as before. 
 More info

Coding

After finishing our design the next step is to do some coding to bring our app alive. Our mission is: After clicking the button,  the app has to read the text being in the Text Box. Change to Blocks view in the top right corner and let’s CODE!

First we need an event called “when Button1.Click do“: The blocks being in the event will run after clicking on our button.

So the event is ready, we need to fill it up with blocks to read out the text from the Text Box. Our Text To Speech component is capable of doing this job, let’s add the appropriate method.

This purple method can be found among the Text to Speech’s blocks, and speaks the given message, but there is one thing still missing: the message. We want our text being in our Text Box to be read out, so we need to get this text.

YOUR app is ready! Connect to the Companion and test it. Having any questions write a comment below! Did you like our tutorial? Share it!

You can download the finished result here:

TTS.apk (4.74MB)
TTS.aia (1.62KB)

You May Also Like…

Music Player

Music Player

Have you ever wondering about developing the coolest music player app on the world? Do you enjoy listening to music?...

Side Menu Layout

Side Menu Layout

Hello, today we will talk about how to use the side menu layout in Kodular. Let's get started.   1. Adding the...

How to force the phone to vibrate

How to force the phone to vibrate

Hello, in this article we will be talking about how to make your device vibrate programmatically using Kodular. Let's...

1 Comment

  1. Kumar

    Good Job