 Okay, so for this project, I am using Visual Studio Code as always and I've already created an index.html page that we will be using for this project. So let me close the File Explorer and just focus on the document itself. So let's create the HTML to start with and then I will title this Anyang. The first thing we need to do is to include the Anyang library. So let's go to teller.com slash Anyang and I will post this link in the description below as well. And they actually have a really cool demo in here which you can have a look at before you start coding if you like to. And then if you scroll down, this is the script that will get us started. So first of all, let's copy the Anyang minified.js file. So let's copy this and paste it just here at the bottom of our body. Save this and now we can start creating the Anyang elements. Now let's open a new script tag and this is where we will be writing the application. So first of all, we need to check whether Anyang exists and is working. And to do this, we can simply do if Anyang and then we can just console log something. Anyang works. Let's save this and hop back to the browser. Open our page, of course, refresh. And as you can see, nothing is displayed in here and this is because we actually console logged the message. So we have to right click on our page, inspect and then go to console. Let me hide some of those messages first of all. Let me refresh. So as you can see, this Anyang works, which is good. Now we can start writing the rest of the application. The first thing that we need to do is add some commands to the application. So let's start by writing by adding some commands. To do this, we can do our command. And this is where we'll be adding the voice commands. And this is where we'll be adding the function name that corresponds with the voice command. So let me give you an example. For example, let's say our first or first voice command will be hello. And let's correspond this voice command with a function called greetings. And let me give you another example here. So let's say we want another command and this command will be what is your name? So this will then link to a function called, for example, introduction. And of course you can name them whatever you like. Also, you can keep on adding other commands if you wish to. And also you can use different languages for this. Now that we've created two basic commands, let's add them to Anyang. And to do this, basically what we have to do is Anyang. Add commands and we need to pass the commands that we just created here. The next thing we have to do is make sure that Anyang is actually listening to us. And to do this, we just have to do Anyang start. As you can see, Anyang makes everything super easy to use and it's very easy to understand. So let me tidy up a few things. And as you probably guessed, we actually have to create those functions as well because they're not yet available. So let's create the greetings function first, country greetings. And this will basically display or you can do whatever you like. Basically, this will display a greetings message or you can make it do whatever you like. And then let's create the other one, display introduction message. Function, introduction, oh, it's more. And then this is where we'll be displaying some messages. For example, let's say console.loc and we can console.loc something like my name is Billy. For the greetings, instead of just doing a console.loc, let's make it a little bit more interesting. And let's give it and let's make a display random message. So for example, we can create a variable that holds a few messages. And let's say I want I want the first messages to be, hey, and let's add to make a little bit to make it better looking. Let's add some emojis as well. So let's add a speaker and let's say, hey, and then let's add another one. I'm going to copy the speaker in here as well. Let's add another one saying hi there. And let's add a few more just to make it more interesting. Hi. And then let's add a last one called hello. So what I want to do is display randomly one of those options and we can do this by getting the index of this messages variable. So to do this, it will be fairly simple and easy to do. We can do var and create a random index var. And the random index bar will be equals math dot round. And then we need to do math dot random and the random basically I want to make sure is between zero and the number of strings that we have in here. So to do this, we can do times messages and we can get the length of the messages of this works. And then let's console log the random message. And to do this, we can do console log. But let's make this a little more interesting as well and make it display in a different color than the introductions. And to do this, I can do I believe percentage and see. I don't know if this works in all browsers, but you can test it out. And then let's pass the variable messages, messages. And then we need to pass which and then we need to grab around the index. So around the message is displayed. I also need to close the curly brackets in here. And then to make the color actually work, what we have to do is the comma and inside here, we have to do color. Let's make it like this green and then we can do from weight both. Okay, and this looks good. Let's test whether everything is working. And just before we tested just to go back on this, we basically have only two commands that we've put in here. And the first one is hello. And the second one is what is your name. And basically we're just outputting the answers in the console. But of course you can do anything you like with this. So let's save this, go back to the browser and see what we get. Introductions is not defined. So let's have a look. Introduction. Introduction. Okay. Basically, I think the Visual Studio Code to pick this instead of the name from there is introduction. It's the one that we need. So let's save this, go back to Anyang and refresh. And as you can see, we don't have any errors now and the recording, the little red dot in here is blinking, which means that the browser is listening to us. And also if we navigate to here, you will see that the microphone is allowed on this page, which you might have to do. The browser will warn you, of course. And also you can select which microphone to use. So I've selected the microphone that I'm currently recording with. And let's refresh and test both of the phrases that we put in. So first of all, hello. We're getting a random message here. And now let's say, what is your name? What is your name? And as you can see, we're getting my name is Billy. And let's try another one. Hello. Hello. Hello. As you can see, the number is random. So it just picks up one of the ones that we preset. So we had twice a hi there and then we had hey. And that's pretty much everything. And of course you can use this with different languages. And the way you do this, you have to go to the documentation of Anyang and find the GitHub page, which is at the bottom of there of here or API documentation and look for languages, languages. And then once you find languages, click on the link here. And this will give you a list of all the languages you can use in here. And basically what we have to do is pick up your language. For example, BG for Bulgaria. Let's copy this. And to enable the language, all you have to do is underneath here. When you check if Anyang is available, all you have to do is put Anyang dot set, set language. And then you can just put your language prefix. Now that you've done this, obviously you're going to have to change the command to your languages. So instead of writing in English here, you would write this in your language. And also you can obviously write the output in your own language and that should work as well. Well, I hope you enjoyed this tutorial. Please give it a like, subscribe, hit the notification bell if you'd like to stay tuned with everything that I'm posting. Don't forget to comment. And as always, my name is Roddy. Thank you for watching and I will see you in the next video soon.