Hello devs , In this article I am going to demonstrate you how you can convert your text to speech with the help of vanilla javascript . We will be using two of javascript web API to convert text into speech .

We will be using the following two web API’s to convert text into speech

  • SpeechSynthesisUtterance this API takes care of what text should be speaked and in what manner in terms of lang , voice , speed , pitch etc.
  • SpeechSynthesis this API takes care of all voices available on your device .

Some properties of SpeechSynthesisUtterance

  • lang : language of the result.
  • pitch : pitch of output . It’s value lies from 0 to 2.
  • rate : the speed of output . It’s value can be in between 0.1 to 10.
  • text : The text which is to be converted into speech.
  • voice : Voice to be used in result.
  • volume : Volume of result speech . It’s value lies in between 0 to 1.

Methods available in SpeechSynthesis

  • speak: It is used to speak the text .
  • getVoices: This method is used to get all the voices avaiable in your local system.
  • pause: This method is used to pause the speech.
  • resume: This method is used to resume the speech.
  • cancel: This method used to cancle (stop) the speech.

Now let’s test our API . Open your console by pressing Ctrl + Shift + I and then type the following command in it and hit Enter.

var text = new SpeechSynthesisUtterance("Be Practical");
speechSynthesis.speak(text);

Heared a voice right ? So it means API is working successfully in your browser .If you didn’t heared a voice then try any different browser . Now let’s make a longer speech with the help of a text file .

Let’s make a text file named as Speech.txt and fill some dummy text in it which is to be converted into speech . Now we will try to convert all this dummy data stored in file to speech .

Make a html file in which we will write our javascript code i.e., index.html and paste the below code in it . When you run this file in your browser , you will hear all the content of your speech.txt file

Note : Make sure index.html and speech.txt file must be located in same folder .


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to speech - Be Practical</title>
</head>
<body>
    <script>
        function GetFile(path, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(xhr.responseText);
                    } else {
                        callback(null);
                    }
                }
            };
            xhr.open("GET", path);
            xhr.send();
        }

        function handleFile(fileData) {
            if (!fileData) {
                return;
            }
            var speech = new SpeechSynthesisUtterance(fileData);
            speechSynthesis.speak(speech);
        }

        GetFile("speech.txt", handleFile);
    </script>
</body>
</html>

In this above code we are using javascript xmlhttprequest to fetch all the content of speech.txt file and then with the help of web API we are able to convert all the content into speech .

So that’s how we can convert text into speech using vanilla javascript .

Next article : Firebase CRUD with vanilla javascript

Thank you for reading

Follow me on Linkedin : https://www.linkedin.com/in/anand346