Text To Speech Converter with Auto Text In HTML CSS & JavaScript

U-GINE MEDIA November 10, 2023

One powerful tool in achieving this goal is the integration of a Text-to-Speech (TTS) Converter with Auto Text functionality. This guide is your key to unlocking the potential of creating an enriching web environment where users can seamlessly convert text to speech with added convenience through automatic text inputs.

This guide is your gateway to creating a Text-to-Speech Converter with Auto Text that aligns with the principles of universal design. Let's embark on this journey of making the digital landscape more accessible for all.

Share this to your programmer friends. I hope y'all learnt something today, make sure to let me in the comments. 

Don't forget to subscribe to my YouTube Channel

This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.

If interested in watching the video before running the code below, you can click the play button to get started.

First, create a folder with any name you like. Then, make the necessary files inside it.

Create a file called index.html to serve as the main file.

Create a file called style.css for the CSS code.

Create a file called script.js for the JavaScript code.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text To Speech</title>
</head>
<body>

<div class="cover">
    <textarea placeholder="Enter anything here!"></textarea>
    <div class="col">
        <select></select>
        <button>Listen</button>
    </div>
</div>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 


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

body {
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

textarea {
    width: 600px;
    height: 300px;
    padding: 20px;
    border-radius: 5px;
    outline: none;
    resize: none;
    font: 1.1em sans-serif;
    line-height: 1.7;
}

textarea::placeholder {
    color: #222;
}

.col {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.col div {
    position: relative;
    flex: 1;
}

.col select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    appearance: none;
}

.col img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-59%) rotate(180deg);
    width: 15px;
}

.row button {
    cursor: pointer;
    padding: 10px 20px;
    font-weight: 700;
    border: none;
    outline: none;
    background: rgb(2, 2, 252);
    color: #fff;
    border-radius: 3px;
    font: 1em sans-serif;
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.


<script>

let speech = new SpeechSynthesisUtterance();
let voices = [];
let voiceSelect = document.querySelector("select");

window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    speech.voice = voices[0];


    voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)))

    console.log(voiceSelect)
}

voiceSelect.addEventListener("change", e => {
    speech.voice = voices[voiceSelect.value];
})



document.querySelector("button").addEventListener("click", e => {
    speech.text = document.querySelector("textarea").value;

    if (document.querySelector("textarea").value == "") {
        speech.text = "Please insert some sentences";
    }
    window.speechSynthesis.speak(speech)
})

</script>

Conclusion and Final word

As we draw the curtain on our exploration of creating a Text-to-Speech Converter with Auto Text using HTML, CSS, and JavaScript, we've not only delved into the intricacies of code but also championed the cause of digital inclusivity.

This tutorial has equipped you with the tools to go beyond conventional web development, enabling you to craft an environment where users can seamlessly convert text to speech with the added convenience of auto text input. By understanding the symbiotic relationship between HTML's structure, CSS's aesthetics, and JavaScript's dynamic capabilities, you now possess the skills to champion accessibility in your web projects.

Let's continue shaping a digital future where technology is a force for everyone. Happy coding!
U-GINE MEDIA

Posted by U-GINE MEDIA

Post a Comment

1 Comments

We are happy to hear from you.

Close Menu