HOW TO CONVERT TEXT TO SPEECH USING JAVASCRIPT.

Hello readers, Today in this blog you'll learn how to convert text to speech using JavaScript. You can use it to create a web page for convert text into speech with different language. It's all done with JavaScript and easy to get started with this.

customizing the voice and you can change the voice when speaking. The available voices will differ depending on browser and OS.

And you can also adjust the pitch, rate and volume of speak properties. These all default to 1 if not specified. Now You are ready for converting text to speech using JS.

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

<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>Convert Text To Speech - Sagar Developer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Text To Speech-JavaScript</h1>
        <input type="text" id="text_to_speech" placeholder="Enter Text To Speak.." />
        <button type="button" onclick="textToAudio()">
            Speak
        </button>
    </div>
    <script src="script.js"></script>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #a9e6d6dd;
    font-family: sans-serif;
    width: 100%;
    height: 100vh;
}

.container {
    width: 320px;
    height: 300px;
    background: #a9e6d6dd;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 30px;
    box-sizing: border-box;
    padding: 70px 30px;
    box-shadow: -10px -10px 15px #ffffff80, 10px 10px 15px #ffffff80;
    text-align: center;
    justify-content: center;
}

h1 {
    margin: 0;
    padding: 0 0 8px;
    text-align: center;
    font-size: 25px;
    color: #020202;
    margin-bottom: 25px;
    margin-top: -20px;
}

input {
    padding: 10px;
    width: 250px;
    border-radius: 5px;
}
.container input[type="text"]{
    border: 2px solid #737cf5;
    border-radius: 8px;
    background: transparent;
    outline: none;
    height: 40px;
    color: #111;
    font-size: 16px;
    padding-left: 12px;
}
button {
    padding: 10px;
    margin-top: 30px;
    background: #6a67ce;
    color: #fff;
    border-radius: 5px;
    border: none;
    outline: none;
    box-shadow: -10px -10px 15px #9c91fa80, 10px 10px 15px #27b3d675;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
button:hover{
    background: #0719bdbb;
}

script.js

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >

function textToAudio() {
    let msg = document.getElementById("text_to_speech").value;

    let speech = new SpeechSynthesisUtterance();
    speech.lang = "en-USA";

    speech.text = msg;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 1;

    window.speechSynthesis.speak(speech);
}

Sagar Developer

HOW TO CONVERT TEXT TO SPEECH USING JAVASCRIPT.

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

HOW TO CONVERT TEXT TO SPEECH USING JAVASCRIPT.

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form