Build a Text to Voice or Speech App Using Google Chrome Web Speech API in Javascript Full Project For Beginners

Build a Text to Voice or Speech App Using Google Chrome Web Speech API in Javascript Full Project For Beginners


Welcome folks today in this blog post we will be building a text to speech app using google chrome web speech api in javascript. This is a fun little project for javascript beginners. All the source code of the tutorial will be shown below.



Get Started



In order to get started you need to make a index.html file inside the root directory of your project and copy paste the following code







<!DOCTYPE html> 
<html lang="en"> 

    <meta charset="UTF-8"> 

    <title>Text to speech!</title> 

    <!-- CSS Links -->
    <link rel="stylesheet" href= 
    <!-- Giving links to jquery and bootstraps js libraries -->
    <script src=""
    <script src= 
    <!-- Custom JS that contains all the main functions -->
    <script src="main.js"></script> 
    <link rel="stylesheet" href="style.css"> 

    <form class="container text-center"> 
        <div class="row"> 
            <div class="col-sm-6 mx-auto"> 
                <div class="form-group"> 
                    <div id="front-text" class="text-success"> 
                        GeeksforGeeks Text-to-Speech Conversion 
                    <!-- Input box text area -->
                    <textarea id="maintext" class="form-control form-control-lg"
                        style="max-lines: 2" placeholder="Enter the text..."> 
        <!-- Rate of voice which we will be updated by user -->
        <div class="row"> 
            <div class="col-sm-6 mx-auto"> 
                <div class="form-group"> 
                    <label for="rate">Rate</label> 
                    <div id="rate-value" class="badge badge-primary" >5</div> 
                    <input class="custom-range" type="range" id="rate" max="1"
                        min="0.2" value="0.5" step="0.1"> 
        <!-- Pitch of voice which we will be updated by user -->
        <div class="row"> 
            <div class="col-sm-6 mx-auto"> 
                <div class="form-group"> 
                    <label for="pitch">Pitch</label> 
                    <div id="pitch-value" class="badge badge-primary" >5</div> 
                    <input class="custom-range" type="range" id="pitch" max="1"
                        min="0.2" value="0.5" step="0.1"> 
        <!-- The different types of voice along with country and language -->
        <div class="row"> 
            <div class="col-sm-6 mx-auto"> 
                <div class="form-group"> 
                    <!-- This section will be dynamically loaded from 
                        the API so we left it blank for now-->
                    <select class="form-control form-control-lg"
                            id="voice-select" ></select>                
                <!-- Button to enable the speech from the 
                    text given in the input box -->
                <button id="submit" class="btn btn-success btn-lg"> 
                    Speak it 



READ  Node.js Project to Convert SVG Image to Webp Format Using Sharp in Javascript Full Tutorial For Beginners



Now you need to write some css code and now you make a style.css file and copy paste the following code which is shown below.




body { 
    background: url('images/background.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    height: 100vh; 
    background-attachment: fixed; 

#front-text { 
    font-size: 35px; 
    color: white; 
    font-weight: bolder; 
    text-shadow: 1px 1px 1px black; 
    display: block; 
    position: relative; 
    margin-bottom: 5%; 
    margin-top: 15%; 

#rate-value { 
    float: right; 

#pitch-value { 
    float: right; 

#foot { 
    font-size: 20px; 
    color: white; 
    font-weight: bolder; 
    display: block; 
    position: relative; 
    margin-top: 1%; 




Now create a main.js file where we will write the javascript code for the application. And copy paste the following code




// Initialising the speech API 
const synth = window.speechSynthesis; 

// Element initialization section 
const form = document.querySelector('form'); 
const textarea = document.getElementById('maintext'); 
const voice_select = document.getElementById('voice-select'); 
const rate = document.getElementById('rate'); 
const pitch = document.getElementById('pitch'); 
const rateval = document.getElementById('rate-value'); 
const pitchval = document.getElementById('pitch-value'); 

// Retrieving the different voices and putting them as 
// options in our speech selection section 
let voices = []; 
const getVoice = () => { 
    // This method retrieves voices and is asynchronously loaded 
    voices = synth.getVoices(); 
    var option_string = ""; 
    voices.forEach(value => { 
        var option = + ' (' + value.lang + ') '; 
        var newOption = "<option data-name='" + + 
                "' data-lang='" + value.lang + "'>" + option 
                + "</option>\n"; 
        option_string += newOption; 
    voice_select.innerHTML = option_string; 

// Since synth.getVoices() is loaded asynchronously, this 
// event gets fired when the return object of that 
// function has changed 
synth.onvoiceschanged = function() { 

const speak = () => { 
    // If the speech mode is on we dont want to load 
    // another speech 
    if(synth.speaking) { 
        alert('Already speaking....'); 
    // If the text area is not empty that is if the input 
    // is not empty 
    if(textarea.value !== '') { 
        // Creating an object of SpeechSynthesisUtterance with 
        // the input value that represents a speech request 
        const speakText = new SpeechSynthesisUtterance(textarea.value); 

        // When the speaking is ended this method is fired 
        speakText.onend = e => { 
            console.log('Speaking is done!'); 
        // When any error occurs this method is fired 
        speakText.error = e=> { 
            console.error('Error occured...'); 

        // Selecting the voice for the speech from the selection DOM 
        const id = voice_select.selectedIndex; 
        const selectedVoice = 
        // Checking which voices has been chosen from the selection 
        // and setting the voice to the chosen voice 
        voices.forEach(voice => { 
            if( === selectedVoice) { 
                speakText.voice = voice; 

        // Setting the rate and pitch of the voice 
        speakText.rate = rate.value; 
        speakText.pitch = pitch.value; 

        // Finally calling the speech function that enables speech 

// This function updates the rate and pitch value to the 
// value to display 
rate.addEventListener('change', evt => rateval.innerHTML 
        = (Number.parseFloat(rate.value) * 10) + ""); 

pitch.addEventListener('change', evt => pitchval.innerHTML 
        = (Number.parseFloat(pitch.value) * 10) + ""); 

// This is the section when we assign the speak button, the 
// speech function 
form.addEventListener('submit', evt => { 


READ  Node.js Express Zoom Clone Group Video WebRTC P2P Chat With Screen and File Sharing Using in Javascript Full Project For Beginners









Leave a Reply