How To Make Your Computer Speak With JavaScript

Key Takeaways

hello everyone up human sorry about that that is just my computer I taught it how to speak using JavaScript just a little bit ago and I can introduce myself no I think that's fine I can do welcome to Skynet so it looks like my computer finally shut up which means I can tell you about today's video sponsor atlanticnet hosting and they're giving you an entire year long free trial of their servers and these are powerful servers even more powerful than the server I host my own site on and you're getting it for free for an entire year on top of that they have incredible data reliability and redundancy so you know that your data is going to be there and secure and you can also set up automatic backups if you want on top of that you're gonna get an additional $50 worth of credit if you use the code Kyle when you check out so make sure you use the link down in the description below to get an entire year long free trial welcome back to web dev simplified my name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner so that sounds interesting make sure you subscribe to the channel for more videos just like this one now as you saw in the beginning of the video I taught my computer how to speak using only JavaScript and as you can see we can type in any text we want over here for example javascript is what lets me speak and then if we click play Jove Oscar you're gonna hear it speaks back to you so and it's going to work we can change the speed we can make it really fast for example a script is what lets me speak and it's gonna speak much faster and if we bump that back down to one time small group we can pause it in the middle and you're gonna say it's gonna stop me so you know we can resume from there we can use stop to just completely restart our plane and do so much more so I'm gonna show you exactly how to build this so you too can have a really annoying computer that talks to you so to get started we're gonna need an index.html file this is just going to be so we can actually show our stuff on the page hit exclamation point and tab this is going to give you this boilerplate code and inside if our body we're going to need this really big text area as well as these different inputs and buttons down here so let's start by creating a text area and inside of this text area all we really want to do in here is give it an ID of text this is just so we can select this in our JavaScript and then next we want to work on this bottom section so we're going to have a label and this label is going to be for a particular input which we're going to give an idea of speed and we're going to give this label a text of speed then we're going to have an input this is going to be a number input and for this number input we're gonna give it a name here of speed I will just give it an ID of speed as well and let's make sure we specify a minimum which we're going to say is 0.5 we never want this to talk slower than 1/2 speed and we're also going to set a maximum which is going to be 3 and we're also going to set the step this means that when I use the up or down arrow on my keys this is how far it increases and as you can see we have that set to 0.5 that way we can change this by 0.5 increments if we want lastly I want to set a default value to be equal to 1 just so when you refresh the page and load this is going to be set to 1 by default which is just the normal talking speed which is exactly what we want now we're gonna have a few buttons down here this first button here is gonna be for plain and in order to select it in our JavaScript again I'm gonna give this an ID we're just gonna say play button copy this down a couple times for our pause button as well as our stop button and let's just make sure we label these as pause and stop now if we save this and we open this with 5 server you should see we're gonna have something somewhat similar to what we have over here we just have a few changes to the sizing of this text box as well as where our different elements are placed so to do that we're just going to put a simple style tag here inside of our head because we're gonna use really basic styles I just want to select the body change the width here to 90% and I want to change the margin to 0 and auto this is just going to center all of our content in the middle and give us a little bit of padding on the sides 5% on each side and then I want to change our margin on the top to be 1 REM just to space our content out from the top of the page now let's select that text area which we gave an ID of text and all I want to do in here is change the width to 100% and the height to be 50 VH essentially 50% of the height of my screen and that gives us the exact same sized box between these two elements and now as you can see all of our styling and HTML is done and we can move on to the fun part which is the JavaScript and actually making this talk back to us with whatever we type inside of it so let's create a file called script J s and let's make sure that we import that here so we're just gonna have a script tag with a source attribute which is just our script J s and just make sure you put the defer keyword here this is going to make it load after all of our hTML is parsed and now if we save that instead of our script we can do whatever we want to make our page talk to us now the very first thing that I want to do is select all of the different elements that we gave IDs so for example we can select our play button and we can just say document dot query selector actually we just do get element whoops get element by ID and we just want to get the ID here which is going to be for play button copy this down because we have a pause button which is going to be exactly the same and we also have here a stop button which is going to be exactly the same as well we can copy this down a couple of times because we're going to have our text input as well as our speed input and this text input just has the ID of text and speed just has an ID of speed so now we have all of our elements selected so we can actually start adding event listeners to these and in our case we really want to have an event listener on the play button first because that's what I want to focus on so we can say play button dot add event listener and we want to add an event listener for whenever we click on this button we want to play the audio that is inside of our text input so to do that we're going to call a function just called play text and we're going to pass it in our text input dot value this is whatever is typed into our input here so now let's create that function which is just called play text and we know it's going to take in a text that is going to play and in order to play things and have your computer's speak to you we're going to be using an API called the speech synthesis and this is going to allow us to actually speak and in order to make our speech synthesis speak we're gonna need something called in utterance which is a speech synthesis utterance and this essentially specifies how fast you speak what texture speaking what the voice that is actually being spoken all of those different things are specified by this utterance so let's create a new speech synthesis utterance we're just going to specify here our utterance is equal to that and we can just pass in our text here and that is going to be what our utterance is going to speak now to specify the speed of our uh pterence we can just come in here and say utterance dot to rate this is going to be the speed and we want to set that to our speed input dot value or we're just going to default that to one if our speed input value is null in this make sure this is a capital I up here for speed input I just have that spelled wrong now what we can do is call speech synthesis dot speak and all we need to do is pass in an utterance so we can just pass in our utterance here and this should speak out our utterance to us so let's save this and we're going to type in hello world and if we click play hello world you hear that it speaks back to us hello world we're just gonna copy this hello world a couple times and if I click play a world he'll I can actually modify this text while it is speaking which is obviously bad so in order to prevent that we want to make sure we disable our text input when it is speaking so what we can do is right before we speak we can take our text input we can take the disabled property and we can just set this equal to true now what's going to happen is if we type in some text and it clicks place that you can see that it is disabled our text box while it is plain but of course now our text box is disabled and we have no way to re-enable it so luckily this utterance has an event listener that tells us when it's done speaking so we can just say utterance dot add event listener and we want to add an event listener called end this is going to be whenever it's done speaking it's going to call this function and in this function all we want to do is take our text input and we want to take the disabled the flag and we want to set it to false now if I just put in some text hit play hello you can see that it plays back to us and as soon as it's done it undisciplined then play a game world and you can see that it works exactly as we want it to so now let's work on our pause functionality next let's select our pause button we want to add an event listener for whenever we click on this just like we did with our other and we want to call a function called pause text just like that so let's create that function pause text and inside of this function all that we want to do is take our speech synthesis and actually pause it so we can say speech synthesis dot pause just like that call a function and it is going to pause our speech for us one thing we want to check first though is to make sure we are speaking so we can just say if speech synthesis dot speaking which is going to return true if we're currently speaking then we want to pause otherwise don't do anything because if we're not speaking we obviously don't want to pause now if we save that we type in something like hello world this is me and if I click Play hell no pauses you can see that it has paused itself and then if I click play again it's not actually doing anything so we need to do is make sure to modify our play function in order to resume our speech if for some reason we are paused so in order to do that we can say if our speech synthesis of speech synthesis dot pause if that is true then we know that we need to actually unpause and we also want to check to make sure that we are speaking so speech synthesis stops speaking because any time that we have text that we still need to speak this is going to be true and if we're currently paused this is gonna be true so essentially if we have text that we still want to speak and we are currently paused then instead of creating a new utterance what we want to do instead is just to take our current speech synthesis and we want to resume it so we're just gonna say resume and we're just returning here which would make sure that we don't actually start a new speech afterwards so now let's save that and we're gonna do the text hello whoops world this is me I'm gonna click play then pause and you're going to notice it didn't actually play at all and the reason for this is because we are currently paused right now if I just come in here and inspect our source go into our console and type in speech synthesis dot cancel this is going to reset every we're gonna handle this later with the stop button but for now I'm just gonna do this manually and now if I click play hello he's actually playing properly so now if I quit play don't pause you can see it pause if I click play again it's going to finish off with the last word of me I'm traveling doing this you can see we got that far let's play again and it's going to finish out so now we're playing and pausing as working as we expect but now it's actually implement this cancel which is going to be our stop button which essentially says just quit out of everything so in order to do that what we need to do is add another event listener here first stop button we want to make sure this is gonna be on click we're just gonna call this stop text oops just like that there we go and now let's create that function called stop text and all we want to do is just take our speech synthesis and we want to just cancel this and one thing that we also want to make sure that we do is in order to unpause our text let's say that we play then pause then stop we're still gonna be in that pause state which you noticed actually broke our code earlier so in order to get around that we can just say speech synthesis here whoops of speech synthesis dot to resume this is going to take us out of the pause state and then immediately cancel so that way essentially it's just going to reset us at a completely fresh slate when we go into this play text functionality to replay so now if we save that type in some text we'll say hello world this is me again click play and then stop you can see a couple these stops click play link pause and then we actually come and click stop and click play is gonna see it starts over completely from the beginning which is exactly what we want and it does everything perfectly which is exactly what we want we can even change the speed to 2 for example this is me you can see it speaks twice as fast but one problem if we just duplicate this a couple times is that if we click play and then change our speed doesn't actually do anything while it is speaking so we need to set up some more event listeners in order to modify our speed as we're currently speaking so that way if we change the speed the text is going to slow down or speed up accordingly now doing this is a little bit trickier than it may seem you may just think we update the rate and our utterance and that's going to fix our problem but unfortunately once you start speaking updating your uh pterence actually doesn't do anything so we actually need to stop our speech and then restarted at the current position that we're at and luckily we can do that pretty easily by using utterance dot add event listener and we want to add an event listener called boundary and what this is going to do is give us an event right here and this event is going to fire essentially every single time we get to a new word that we want to speak so it'll be for example when we speak hello when we speak world when we speak of this every single time we're going to reach a boundary and this is going to get called and there's some specific properties in this boundary for example this e has a thing called a char index this is essentially the index of the exact character at the very beginning of the word so for example if we're saying hello here our char index is going to be zero since it's the first character in our string while if we're speaking W for world our char index can be zero one two three four five six so then we know exactly where we are inside of our string based off this char index for exactly what we're currently speaking so if we're speaking the word world then we're going to have an index of six for speaking the word hello our index is going to be zero so we can actually save this index it's gonna call this current character this is just gonna be a global variable which I'll set up here just like that and what this is going to be is the current index of the character that we're speaking the word of at that exact moment that way when we change our speed we can restart our text based on that exact current character also we're gonna need to take this utterance and move it outside of this play text function so I'm just going to take all of this utterance stuff I'm going to move it out of here and instead of having our rate be set here I'm going to move that down inside of our play text and instead of specifying our text here I'm just going to specify it here where you say utterance text is equal to our text so now our specific information such as the speed and the text is set inside of play and all of our global information here for actual events are set outside of our play that'll just make it easier to work with now what we can do is take our speed input you can add an event listener an input this will be fired every single time that we actually change our speed input and what we want to do here is essentially stop our current text so we can just call stop text and then what we want to do is resume playing our text at the exact character index we're currently at so we can call play text and in order to get the exact text that we're currently playing we can just say utterance dot txt this is our current text and we want to get a substring of that text which starts at our current character essentially if we pass in here the index of 3 this is going to get the character index at 3 so 0 1 2 3 so it would start at L o and then go from there same thing if we passed in for example 6 it would get from the W onward and all of the characters after that so that way if we change our speed while we're talking it's going to essentially restart our speech at the exact word we are currently speaking in and then continue speaking from there at the faster or slower speed so let's save this and just make sure what we did actually works so we can say hello world just like that and then let's click play hello world okay that works properly let's copy this a couple times just so we can see what happens if we change our speed with a little white hello and reduce our speed hello world you can see it restarts and go slower and then lists for example do a similar thing we could play bump it up to 2 a world hello world and you can see that it drastically increased the speed that we were speaking at and it did that live as it was speaking it just had to respec the word that it was currently on now one last thing that I want to do is inside of our play text I just want to put a simple check here that says if speech synthesis dot speaking I just want to say if we're currently speaking just return essentially if we're already speaking I don't want to restart our utterance from the beginning so if we click the play button twice in a row I don't want to have some weird stuff happen where it's speaking twice over top of itself I just want to exit out of our function and pretend that nothing at all actually happened and that is all it takes to make your computer speak to you if you enjoyed this video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day