Text to Speech using JavaScript (Source Code)

Hey, developers welcome to Day 32 of our 90Days 90Projects challenge. And in Day 32 we are going to create a Text to Speech using JavaScript.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

text to speech online, text to speech converter, text to speech using javascript

HTML Code

<!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 </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="speech-container">
        <h2> Text to Speech </h2>
        <textarea id="inputText" cols="10" rows="5" placeholder="Enter text here..."></textarea>
        <button id="speech"> Speak </button>
    </div>

</body>
<script src="script.js"></script>

</html>



CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.speech-container {
    padding: 2rem;
    display: flex;
    text-align: center;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

.speech-container,
textarea {
    color: white;
    background-color: #e64b00;
}

.speech-container h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

textarea {
    resize: none;
    border: none;
    outline: none;
    padding: 2rem 0;
    color: white;
    text-align: left;
    font-size: 1.1rem;
}
textarea::placeholder{
    color: #fff;
}

#speech{
    width: 10rem;
    padding: .8rem;
    margin: 0 auto;
    cursor: pointer;
    color: #e64b00;
    font-size: 1.2rem;
    border-radius: 15rem;
    display: inline-block;
    transition: all .3s linear;
    border: 2px solid #e64b00;
}

#speech:hover{
    color: #fff;
    border-color: #fff;
    background-color: #e64b00;
}

JavaScript

const userText = document.getElementById('inputText');
const speechBtn = document.getElementById('speech')

speechBtn.addEventListener('click', function () {
    speechText = userText.value;

    let speechData = new SpeechSynthesisUtterance();
   
    speechData.text = speechText;

    speechSynthesis.speak(speechData);
})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad