Text-2-Speech API - Tutorial
Tags: beginners, javascript, html, tutorial
Published: 2022-09-15 06:43:59

This is going to be a quick tutorial( If you find **Videos** better, [here's](https://youtu.be/nvKBIiafyOM) the link). Open up your code editor and create an `HTML` file. Inside just define the basic `HTML skeleton`, and add an `h1` and a `p` tag, like so:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>
  </body>
</html>
``` 

Then go to [ResponsiveVoice.org](https://responsivevoice.org/). This is where we will get the Text2Speech API. It's also completely free and you don't need to add any credit card information :)

Go To **Sign In**.

![ResponsiveVoice SignIn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8b5cp7kalqmvad04skg.png)

**App Dashboard.**
![ResponsiveVoice AppDashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u91xp4xavx8adyk8qote.png)

**Create an account.**
![ResponsiveVoice CreateAnAccount](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h53mg5uwgo8uvmijzko6.png)

And **copy** the script tag you see on the screen.
![ResponsiveVoiceKey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pofaf9kky2yyash990ay.png)

Enter that `script` tag before `</body>`.

Then create a separate script tag. And add `responsiveVoice.speak("hello world");`.

Your `HTML` file should look like this:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>

    <script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>
    <script>
      responsiveVoice.speak("hello world");
    </script>
  </body>
</html>
```

Now open up the browser and you should hear _"Hello World"_

We can make this more **dynamic**. Instead of saying _"hello world"_ we can say something inside of our `h1` tag. To do that, write `responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML)`

You also might have noticed that by the second time you refreshed the page a different voice spoke. You can also choose which voice will speak. Here's a [**list**](https://responsivevoice.org/text-to-speech-languages/) of all the voices.

Once you've chosen a voice, you can add it in the `responsiveVoice.speak` function after the text, `responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML, "Spanish Male")`

Feel free to experiment with this!