Have you ever wondered how some apps like Siri, Google Assistant and Alexa are made to pick up texts and read them aloud? They are also designed to listen to user voice using a michrophone and interpret them in a text format.

If you’ve been thinking about how they’re done, well you’re in the right place. Cause we’re going to read a text in an input out loud using our browser using just plain JavaScript. So keep reading if you’ll love to see that.

Before you begin this tutorial, you should already have a basic knowledge of HTML, and JavaScript and object oriented JavaScript because we’ll be using those two languages throughout this tutorial. We’ll start by introducing a class called the “SpeechSynthesisUtterance“. Notice the “Speech” begins with a capital letter.

The speech Synthesis Utterance class is an inbuilt web API just like the web storage API which enables the browser read text aloud from a given code. It can be modified to read the text from an input field which we’re going to use in this tutorial.

var msg= new SpeechSynthesisUtterance ();

This code above creates an instance of the speech Synthesis Utterance class. Let’s create our html input to add our text.

<div>

<input type="text" id="message">

<button type="button" onclick="saytext()"> speak </button>



</div>

Now we’re going to define a “saytext()” function to read out what we’ve written on our input field.

Note: not all browser support the SpeechSynthesisUtterance class. See below for a detailed list of supported browsers.

<script>

function saytext(){

var text= document. getElementById("message"). value;

var msg= new SpeechSynthesisUtterance ();

msg.text=text;

msg.volume="0.5";

msg.lang="en-US";

msg.pitch="1";

msg.speak(msg);

}
</script>

The text method.

This method specifies the to be spoken by the browser.

The lang method.

The lang method tells the browser which language it Should read out to.

The volume method.

This specifies the volume method of the output which ranges from 0 to 1.

The pitch method.

The pitch method specifies the pitch which the text is spoken which ranges from 0 to 2.

List of browsers which supports the text to speech output.

  1. Internet explorer: not supported.
  2. Microsoft Edge: version 14 and above.
  3. Firefox: version 49 and above.
  4. Google chrome: version 33 and above.
  5. Safari: version 7 and above.
  6. Opera browser: version 27 and above.
  7. Safari on IOS: version 7 and above.
  8. Opera Mini: Not supported.
  9. Android browser: Not supported.
  10. Opera Mobile: Not supported.
  11. Chrome for Android: version 90 and above.
  12. Firefox for Android: version 87 and above.
  13. Uc browser for Android: Not supported.
  14. Samsung internet: Not supported:
  15. Kai OS browser: not supported.

Always check your browser support before testing the SpeechSynthesisUtterance class.

Feel free to leave a comment below if you have any problems with this article. You can also follow us on social media to stay updated to new posts.

Your favorite web developers.


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

2 Comments

John · May 6, 2021 at 7:31 pm

Hy this cool.

    kid charming · May 6, 2021 at 7:33 pm

    Thanks alot😊. You can check out more of our posts for more cool stuffs

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: