Build a text reader app with Pause and Resume Features using App Inventor | Een jeen - | Skillshare

Build a text reader app with Pause and Resume Features using App Inventor

Een jeen -, Learning anywhere

Build a text reader app with Pause and Resume Features using App Inventor

Een jeen -, Learning anywhere

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (50m)
    • 1. What's in the course

      1:06
    • 2. Designing our app

      6:01
    • 3. Adding the text reader functionality

      10:12
    • 4. How to add Play and stop functions to the Tts component|

      6:30
    • 5. How are we going to add the pause and resume functions

      2:52
    • 6. Dividing the given text into a list of sentences

      10:16
    • 7. Making the tts to speak the the list items one by one

      4:11
    • 8. Debugging the errors and making of the complete and perfect Text reader app

      9:21
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

27

Students

--

Projects

About This Class

I often hear many people complaining about the limited features of App Inventor. While it is true to some extent but it is not an actual problem. The actual problem is most of us use only the direct features of different components while we can do much more with them.

In this course, I will explain to you about developing one such feature that really doesn't exist but, we will create it using the available blocks and components.

In-App Inventor we have a TTS component but, we see that it has only a few blocks and you can only ask it to speak a particular message. The problem with this component is you cannot Pause, Resume or Stop it while it is speaking. However, this is not going to be a problem anymore as I will show you how you to develop Pause, Resume and Stop features using the built-in blocks.

Developing such a feature is a kind of miracle but, once you will go through this course you will develop a sense of being able to create so many features like this for your app projects. You will also start to explore different components and try to build the features that you need instead of restricting yourself to the features that are already available.

All this exciting information is waiting for you right at this place and you need to just click a button in order to start the course. So, what are you waiting for? just click the button and start the course.

Who this course is for:

  • This course is a best fit for you if you already using App Inventor and interested to develop some advanced skills.
  • If you want to add functions like Pause and Resume to TTS component.
  • If you want to learn the applications of lists, variables and text blocks.

Requirements

  • It is better if you have prior experience with using App Inventor before you take this course

Meet Your Teacher

Teacher Profile Image

Een jeen -

Learning anywhere

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. What's in the course: I often hear many people complaining about the limited features of App Inventor. While it is true to some extent, but it is not an actual problem. The actual problem is, most of us use only the direct features of different components while we can do much more with them. And this goes, I will explain to you about developing one such feature that really doesn't exist, but we will create it using the available blocks and components. In App Inventor we have extra speech component, but we see that it has only a few blocks and you can only ask it to speak a particular message. The problem with this component is that you cannot pause, resume our stop it while it is speaking. However, this is not going to be a problem anymore. Because in this course, I will explain to you how to develop those features with built-in blocks. 2. Designing our app : By default, that extra speech component has features such as it can convert the given text into a speech. But there are so many drawbacks with that component, such as it doesn't off even though the app closes. And it doesn't how the play and pause option, we are going to add the plan boss functionality to the TDS component available in thinkable. So this is my bankable dashboard. And first of all, I'm going to create a new app. So I click this button and add an inference. So how created a project seeing TTS testing, and this is our blank app. In this app we are going to add the labels and buttons with the help of which we can ask the TTS competent to read a particular texts. And further, we are going to enhance its functionality by adding the play and pause features. In order to play and pause a particular texts, we need a button, and hence, I will drag the button component and offer a button. We also need a text that needs to be displayed in our app. And that x that is being displayed in our app will be spoken by the TDS component. For that purpose, I'm going to use the label competent. Let us align these two components properly so that they look good. And do align and arrange them properly. I'm going to make use of the arrangements available in the layout dropdown. So for the label, I want a vertical arrangement. So I will just drag and drop it here. And in this arrangement, I will add the label component. I want this label component to occupy the complete space in the app and let this button the available at the bottom of the app. And to do so, we should change the height and width of the vertical arrangement. So first of all, I will select this vertical arrangement. And in the properties section of the vertical arrangement, there is the option to change its height and width. First of all, I will set the height of this vertical arrangement to be fill parent. And next, the width. I will choose it to be about 95 percent. And offer that I want to change the horizontal alignment of the political arrangement. I wanted to set it to left so that the texts that he is shown with the help of a label will start from the left corner. You can also use a what he goes scroll arrangement instead of using a vertical arrangement because you will have a scrolling feature and even though that X exceeds the size of the vertical arrangement, you will be able to scroll it and read it. But first the distinct bubbles, I'm going to use a vertical arrangement as I will not be adding so much of text. So this is the basic design of our app. And apart from that, instead of just showing the label one as a text with the help of the label component, I will select this label competent. And in the properties section, I will change its text. Right now the text in this labor component is labeled one. I would replace it with a short paragraph. So I just remote it. You can create your own paragraph or else you can use the paragraph that I created for the testing purpose. And I will make it available to you with the help of an article or to a resource file. So this is the paragraph. Let me copy it and paste it here in the next section in the properties of labor one-component. So right now you can see that the label is occupying more with. Hence let us change its width to fill parent. So this is the complete x that will be displayed with the help of the label one component. And apart from that, led the button one, display the text as flay. So we want to use this button has a Play button. So that's why I'm renaming it as play. And apart from that, it's better to change the component names in order to gain better understanding. An email, I will change the name of this Play button. So completed, we have the texts are arranged it properly, and at the bottom we have a Play button. Now offer this. We should be able to test our DDS competent, and which we will start doing in the next video. So what are you waiting for? Take a small break and motor the next video. 3. Adding the text reader functionality: Welcome back. So now let us add that tedious component. It is available in the media. Drop-down. Just drag it and drop it. And it will be visible in the non-visible component section. That extra speech component is a non-visible component and it doesn't occupy any space on the screen of the app. For the text to speech component, there are some of the properties which you can change by default, such as country, the language, the page, and the speech rate of the y's which you will be generated. We're not going to change any of those properties, but rather we are going to the block section. So when I select this text to speech component, there are about two events that comes with this text-to-speech component. First event is after the text-to-speech has spoken, that text are after speaking has been finished. And the next event is the event which occurs before the text-to-speech starts speaking. And here is a metered block which can be used in order to ask the p62 speech component to speak a particular message and the message socket you how to add text and with the help of a text string block. And apart from that, you can change the properties, the default properties whenever you want. When you attach this blocks it as fixes beach country Text to Speech language of the text to speech component. So first of all, we are going to make use of an event that comes with the Play button. So let me select the play button. And here at the top, even saying when Play button click E is available. So the even says that what I had to do or the ward the app should do whenever the Play button will be claimed, when the play button will be cleared. Of course, I want to ask the text-to-speech component to read the message that is visible with the help of the labeled component that we have added. So let me select that text to speech component and let me drag this block saying called text-to-speech Speak message. And I will attach it to this event. And the next thing that I had to do is that I had to fill this socket with the text. And the text is available with this label component. And so I will say this label component. And here, when I scroll on the block, sing next to translate dot txt, which indicates the texts that is being displayed with the help of this label component. So I will drag this one and attach it here in this socket. So no, what happens is whenever the Play button will be Click, the extra speech component speaks a message that is. Next that we have added to the x to translate level component. Now let us test our app. In order to test our app, as you know, we have to click the drop-down same test. And later you have to say uncle live option. It will generate a QR code and also an extra code saying VBD UCAS. In this case, I had to make use of this code in order to that's the app. I'm using screen-sharing software. So I will be opening the app and displaying to you right here. So let me open the app. This is the screen-sharing software. Let me add the code and there's the app. So I opened that bankable live app and added the code. Now, the tangible live is showing the app that we are creating. So this is how the app will be. The Play button will be available at the bottom and the label is available at the top. It's better to adjust the design so that the Play button will be available after a small padding from the bottom. So let me click the Play button. The paragraph will be divided into a single sentence. We know that after every sentence we should take a break and hence we will utilize this property. We will divide the paragraphs into a list of sentences, and the TTS will speak each sentence separately. This will help us to detect the sentence which TTS was speaking while the button was clicked and whenever the user clicks the resume play button, the TTS will start speaking that sentence. So this is how it speaks. The end dy, dx that is set to speak. I wanted the pause feature. So at some point of time, the user may think that he needs to pause and he needs to resume the ADS. At that point of time. If you observe that bankable website here with a text-to-speech company and no block seeing DDS, boss is available. Bossing the DDS, resuming the DDS and stopping the DDS. All these features are not available with a DDS component itself. So we should make use of some other medium. Whenever the Play button will be Click. Instead of showing the play text on the button, I want to show the stop next so that the user can click the Stop button and stop it. Let us use if then condition for that purpose. Because we are using the same button, even for stopping the DDS and even for playing the TTS. So I will drag and drop this call, extra speeds peak block in the den section. The next thing that I want to share with you is that in order to detect whether the EDS speaking or not, we need to make use of a variable. And hence, let us create a variable. In a building block section you have a variables available. Just drag this block seeing initialized global named view. Variables can be a number, a string, or a list, which can be used in any event that is available in the block section. Instead of name, I want to replace it with speaking. And here I will use the true and false block. Right now, by default, I want to set it to false. In order to set it to false, I will just click this drop-down and select this false option. So whenever the app starts by default, the speaking variable is set to false. And next, I'm going to use a logic block in the if section. So first of all, I'll drag this block which checks whether the speaking is true or false. And next here, I will drag this variable saying Get speaking. So it will actually get the value that is present in this variable. And next, I will duplicate this block which says false. And I will attach it here. So what we're checking here is that we are checking whether the text to speech component is not speaking. So if global speaking is false, means that text-to-speech component is not speaking. And in that case, we want the text to speech component to speak that x that is present in the label component. Next, I will click this gear button available here. It will enable me to extend the features in this block. Next case is the else. If. So, offer this check, I want to make another tip. I will duplicate this block, which is a logic block, and attach it here in the else if socket. So in the next case, what I will see is that if speaking is true, which means that the text-to-speech component is peaking, then I want to stop it. And hence, in order to stop the extra speech competent, what you have to do is, first of all, you have to make use of this blocked with SASE called text-to-speech, dots speak. And hence I will duplicate this block. And how attached it here in the den section. So in the case when we got to know that the text-to-speech component is yet speaking. We want to stop that extra speech component from speaking, and hence insert off setting the message as the label components texts. Let me delete this one and replace it with a blank extra string block. And hence, the message that the text to speed component will speak and there'll be nothing. And it will not generate any wise. Hope you understood this concept. And in the next video, we're going to test whether the play and stop process will work properly or not. 4. How to add Play and stop functions to the Tts component|: Welcome back. As I have said you in the previous video, we are going to test whether the play and stop function works properly in our app or not. So let us attach this control block to this event block, which is play button. Click. And after attaching it to let us open bankable live app, where we are going to test this app. So this is the bankable live app. Let me click the Play button. The paragraph will be divided into a single line of a sudden. We know is after every sentence we should take. Hence, we will use this property with the paragraph will be divided the paragraph. So as I'm clicking the play button, you can see that the radius is speaking the paragraph right from the start, but it is not actually stopping, has there is an error. Let us check War era. In the above case, when we asked a text to speech component to speak, then the PDFs will start speaking. And in that case, we have not changed the value of the variable called global speaking. So when the text-to-speech starts speaking, then we have to set the global speaking variable to true, which we have not done. If we had done it, then it would have detected a. In this case, that global speaking variable is set to true and PDS is speaking. And hence, it will do the things that are added here in London section. So the variable is different from the text-to-speech component. We have created the variable, which is a Boolean, which checks whether the TTAC speaking or not. And hence, whenever we are switching on and off the pixel speech component, we had to manually change the value of this variable also. So let us drag the block seeing said global speaking to. And after that, duplicate this false block and adjunct here. And again duplicate this one. So now we want to set this variable to false in the case when we are asking the text to speech component to speak nothing. And in the next case here at the top, when we asked the extra switch component to speak a particular message, we have to change the value of the variable that is globally speaking variable to true. And that's this block here. Now let us test the app again and see whether it is working properly or not. So this is, let me click the Play button. We know that after every sentence we should take a break. And so yeah, it's working properly. So whenever I click the Play button. Divided into a single sentence. And whenever I will again click the Play button, then it will stop. So we have added the play and stop function in our app. But there is one thing which looks a bit awkward here, that the text of this button, that is Play button remains play even when DDS component is speaking. At the time, I wanted to show the stop text instead of the plaintext. And whenever the Stop button will be Click and that extra speech competent stops speaking, then I want to show the Play button again. So let us go back to thinkable website. And here what we can do is that we can change the text of the button by adding the blocks. In this control block section. Just click this Play button and you can find the different blocks related to the Play button. Scroll down. You can find a block thing said Play button x2, just drag that block. And now drag and MD takes a string from building blocks section. And I'd ask you to this socket. And here I want to change the name of the play button to stop. Let me duplicate this one. Whenever the Stop button will be clicked, then I want to change the text back to play. So let me also add the plain text here. So let me drag this block and attach bit here at the bottom. And when the stop button will be Click, we want to set the play button text to display the plain text. So it has the blocks here. Now let us test the app. So I will click the Play button. The paragraph will be divided into a single line of a sentence. It is displaying the stop x now. Now let me click the Stop button. Yeah, now it is the swing blade text back. So in this way you can use the same button for two purposes. We are clicking the Play button right now. It is displaying the stop text as text to speech component is yet speaking. Now again, when the EDS component is not speaking, it is displaying the play text. In the coming videos, I will explain you how you can add the play, pause and resume, for instance, in your app. So hope you are more excited to learn about that. Then what are you waiting for? Take a small break and move to the next video. 5. How are we going to add the pause and resume functions: In order to add the play pause and resume function in your app, we should be able to detect where we how balls that text-to-speech component while it was speaking a particular text. This function is not available by default with a text to speech component. And you cannot even did the exact position where the text to speech component has been stopped. But I want you to observe while extra speech components peaks the text. So let me click the play button and I need you to observe some important thing here. The paragraph will be divided into a single line of a sentence. After every sentence we should take a break and hence we will utilize this property. So here the point that I wanted you to observe is that after every sentence, that text to speech component is taking a small break. And its basic rule that even every person should follow. We have to take a break between each sentence that we talk. We can use this property of the text to speech component in order to detect the exact point where it has stopped speaking. Offer every sentence. We have a small dot indicating the end of that particular sentence. And hence, what we have to do is that divide the paragraph in the different sentences as they are separated by dots. So we will create a list of different sentences and we will ask the text-to-speech component to speak one sentence at a time. And after that sentence has mean spoken by TDS congruent, then we will ask it to speed the next sentence. And in this way, we can detect where the text-to-speech component has been passed. And we can resume it by asking the text-to-speech congruent to read from that particular item available in the list of the sentences. So we are going to add the boss resume and play function in our app with the help of breaking the paragraph into a list of different sentences. Hope you understood this concept and we will do it in the next video. So what are you waiting for? Take a small break and motor the next video. 6. Dividing the given text into a list of sentences : So first of all, before we asked the text-to-speech component is speak. We will divide the given paragraph in the list of different sentences. And for that purpose, so we had to create a list. The list that we will recreate. It should be used through various blocks, and hence, it should be a global variable. So for that purpose, let us create a variable. Drag this block from Variable section. Let us name it as list of sentences. And now from the list section that the block saying create empty list and attach it to this socket. So whenever the app starts, the variable list is created with the name list of sentences. So we should make use of this variable list in various blocks present in the block section. We will add the items to this list when we got to know that x2 speech component is not yet speaking. So let me drag the block sing said global list of sentences. Do. So. We should divide the given paragraph into different sentences by detecting the dots present in the paragraph. And hence, let me go to the next section where I have an option saying split text. So this is a block which says split. Drag this block. When you keep the cursor on this block, it will show a comment where you can get to know that this blog helps you to divide the given index into different pieces. Amazed on the parameter or the alphabet that you have given in the socket. You can add a comma there, you can add a dot or anything else. So for this variable, I will add this block to its socket. The text that should be divided is the text that is being shown in the extra translate label. So let me duplicate this. So this is the text that we want to divide. I will attach it here in the socket. I wanted to divide the texts, add dots. So let me go to the text section again, scroll it and drag this empty string and add it to this socket. And here I will add that. So now through this block, we are able to create a list of different sentences. So this will divide the paragraph texts into different sentences. And it is being said to be represented with a variable list, that is list of sentences. We will attach this block two. The control block here. So whenever we got to know that text to speech component is not working, we will first of all, the wide the given text into different sentences. And then in the PDF section, the message that we have added the text to translate X. But we will remove this one, saw it in. And now in the message socket, instead of asking the text to speech component is speed the complete text of the paragraph. We will ask it to speak each sentence one by one. And for that purpose, let us get a block from the list section. Scroll in here. And you can find the block saying select, list, item, list, index. Just drag that blocked and attach it here to this socket. So here, with the help of this block, we can set a particular item in the list. But you should also be able to add the index. Index is serial number, and this number is related to the items present in the list. So whenever I have a link that particular list here, add the index as one, then it will select the first item in the list. If I will add indexes to, then it will select the second item in the list. In the list socket, we have to add the variable list that we create. So let us drag this block and attach it here. In the index section, we can add the value as one, but you have to notice one thing. We will use the same play button to pause and even do resume. And hence, the index will be varying. And as the index is varying, we should add that particular number in the index from where you want to resume that extra speech component. So we should create a variable for representing the index so that the law saying initialize global name. And here, let me change the name into index. And in the socket, I want to set the variable to a number, which is one when it initializes. So the list doesn't contain a GTO index. The index starts from one. So by default, the value for the index will be one. And whenever the text-to-speech combined speak something, we have to increase the value by one in order to ask the pixels which component to speak the next sentence in the list. So drag this variable and attach it here in the index socket. The next thing that we had to do is that as the text-to-speech component, complete speaking a particular sentence in the list, we have to ask it to speak the next sentence. For that purpose, we have got an even block with the text-to-speech competent. So select the text to speech component. Drag that even block which says text-to-speech after speaking. This event occurs when the text-to-speech component has completed speaking a particular message that has been given to it. So now, I have to first of all check if the variable that is global speaking is true or not. And only in that case, I will ask that extra speech component to speak. The next item in the list. I hope you understood. What I wanted to say is that even in the case when we are all seeing that extra speech component, we are asking it to speak a blank text, which will not generate any speech, but it will stop speaking the previous message. And even for this method lock, the event occurs. That is the when text-to-speech after speaking event occurs. And we want to ask the text-to-speech component to speak the next sentence only in the case when the global speaking variable is set to true. So drag the control block, which is then control block, attach it here to this event. Let us first of all check if the global speaking is true. And for that purpose, let me duplicate this one. And in that case, if the text-to-speech component is yet speaking, then what I want to do is that I want to increase the index by the value of one. Which means that, for example, if the index is 1 right now, then I want to change its value to do, and we can do it by using the mat blocks. But before that one, you have to also detect another thing. The thing that you had to detect is that whether extra speech component has completed speaking, all the items are unordered. And in the case, if all the sentences are items in the list, how spoken by ADS, then we don't want it to speak. Next. Rather we want to stop it. So before going forward to increase the value of index, you need to first check whether the DDGS has been paused by the user or not. And then you how to check whether the TDS has completely spoken message or it is yet to speak some of the sentences. And only if the ADS hasn't been paused and it is yet to speak some of the sentences, then you can increase the value of index. You will get to know more about how we are going to do this in the next video. So take a small break and we will meet in the next video until then, bye bye. 7. Making the tts to speak the the list items one by one: In order to check whether the extra speech component has spoken all the items in the list, we have to again use a control block. So drag the if then block and attach it here to the socket. So if socket over, we have to first of all, check whether the items are it's broken or not. So first of all, click the math block and drag this equal to block available. And a here we're going to check the value of the index. And in the case if the value of the index is less than, if the value of the index is less than the length of the list, you can get to know the length of the list with a blocked from lists section. So this is the length of the list of block and just drag it and attach it here to this socket. So for which list do you want to know its length? It is this global list of sentences. Duplicate this block and attach it to this one. And actually this blocked with a socket. So now what we will do is that we will increase the value of this index in that then section. So in order to increase the value of the index, you had to drag the block which says global index to drag it and attach it here in the den section. In the two socket, you have to increase its value. And in order to increase its value, again, we have to use the math block. So go to the math section that this addition block and attach it here to this socket. Now we want to increase the value of global index. So get the variable and attach it here in this socket. And the value by which we want to increase the global index value is one. And hence duplicate this block, which is representing the number one and attach it here. So when the global index value is less than the length of the list, we are increasing the value of the global index. And next, we will ask that extra speech component to speak that particular sentence. So select the text to speech component and drag this block, which is called extra speech, Speak message. And the message section, again, I have to use this block, which is a select list, item list, where the list will be the list of sentences and the index will be the global variable index. So duplicate this one and attach it here. So in this video, we created a mechanism using another control block, which is if then block material. First of all, check if there are any sentences that are yet to be spoken by the tedious, competent. And in the case, if there are the sentences, then it will first of all, increase the value of index and it will allow the DDS competent to speak the next item in the list. So there is yet another video which you need to watch in order to how you were exciting. Pause and resume feature for your text-to-speech app. So see you there. Bye. 8. Debugging the errors and making of the complete and perfect Text reader app: Hey, welcome back everyone. In this video we are going to test with our app is working fine or not. So now I'm going to click the Play button. Now, the paragraph will be divided into a single line of a sentence. We know that after every sentence we should take a break and hence we will utilize this property. So the previous sentence that was spoken by the DDS was the second sentence where it is written as we know that after every sentence we should take a break, and hence, we will utilize this property. Now, when I will hit the play button, it should start right from this sentence, because we have actually paused. And now we are going to resume it. And as we resume it, it should speak from that sentence is after every sentence we should take a break and hence we will use this property. Yeah, So it is working properly. But there is a small mistake in the procedure which you will get to know once the complete sentence has been spoken by the tedious. So let me click the play button and help you understand what is the error that may occur. We know that after every sentence we should take a break and hence we will utilize this property. We will now divide the paragraph into a list of sentences and the TTS will speak each sentence separately. This will help us to detect the sentence which TTS was speaking while the pause button was clicked. And whenever the user clicks the play button, the TTS will start speaking that sentence. It has spoken the complete paragraph. But yet the button is showing the stop text. But rather we want to display the play text. And apart from that, let me click the Stop button now. Now it is showing Play button. Whenever I click Play button now, as it has spoken the complete paragraph, it should start speaking again right at the beginning, but it will not do so. So try clicking the Play button. Now. This will help us to detect the sentence which TTS was speaking while the fourth button was clicked in. So it is speaking from this point, which is the last sentence. This is an error. Even though it has spoken complete paragraph. It is, again speaking the last sentence which we need to correct the mistake that we have done that in the event block. That is when text-to-speech offers speaking, we are increasing the value when the index is less than the length of the available sentences in the list. In the case when it has completely began all the texts, we're not doing anything and this is creating an error. So for this control block, we shared, add even more blocks. That is an else if condition. So click this button and doing this else if block. And in the else if section reordering to check whether the index is equals to the length of the list. So for that purpose, let me duplicate this one and attach it here. And instead of the less than condition, I'm going to change it to equal two. So when I click the dropdown, I can find the radius options such as equals, not equals to, less than or equal to another lab. I'm going to choose a equals 2. So now the check something as if the global index is equals to the length of the list, then you do something and whatever it has to do, we should add the blocks here in the section. First of all, we want to send the global index one. So which indicates that this has completed, speaking all the facts. And now whenever the Play button will be Click again. It should speak from the beginning of the paragraph. And apart from that, we want to stop EDS. And hence as we stop the DDS, we should also mention through this global speaking variable that extra speed is not speaking. So this is a variable which we are using in order to check whether that extra speech, dominant is speaking or not. And hence, we have to even change the value of this video. So drag this block and this block here in the socket, and click this drop-down, change it to false. So as the global index, again, the value of the length of the list, then we are going to stop the BDS. We don't want the PDS speak right from this point. And apart from that, we also want the play button to display the Playtex instead of the top x. Then our incomplete speaking on the text in the paradox. So just click this button, scroll down. Drag this block. Said Play button, extra two. Grab extra string blocks from the extras section. Attach it here. And in this block I will die. So now we will work properly. But let me make changes to other blocks. So whenever the Play button will be Click, if that extra speech is yes. Then sort of displaying the layer. Next, I want to display the resume. And while that text-to-speech is speaking, I don't want to stop the exosome each component. And either I want it. Now let us just our app and check whether it will be working properly or not. So this is our app and it is showing the Play button right now. For clicking the Play button. Let me refresh this app because it will speak the last sentence. In order to refresh the app, all I have to do is just make some changes. It will the properties of the component. So I will adjust, change the text color of the button. And now what I'm going to put our refresh. So now let me click the Play button. So it is now displaying the boss and resume on the button. Instead of showing the stop on the resume button, we should take a break and it is showing the texts. So yeah, it has completed speaking all the bags. And as it has completed, now it is showing the plain text instead of showing the pause onResume on the button. So now this is working properly. You can assume one other thing. That is, let me click the play button and check whether it will be speaking this sentence are it will be speaking the eggs from the beginning. So let me click the Play button. So it is speaking from the beginning of the paragraph. Now, I'm sure that it is the effect one, as we have added and resume function ideas. Instead of adding the Boston Resume button, you can also add the stop button, which can be beside the Resume button.