TextToSpeech with HTML, CSS, JS

-

 TextToSpeech with HTML, CSS, JS






HTML:

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

<head>
    <meta charset="utf-8">
    <title>Text To Speech in JavaScript | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="wrapper">
        <header>Text To Speech</header>
        <form action="#">
            <div class="row">
                <label>Enter Text</label>
                <textarea></textarea>
            </div>
            <div class="row">
                <label>Select Voice</label>
                <div class="outer">
                    <select></select>
                </div>
            </div>
            <button>Convert To Speech</button>
        </form>
    </div>

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

</body>

</html>

 CSS:

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

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

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

::selection {
    color: #fff;
    background: #5256AD;
}

.wrapper {
    width: 370px;
    padding: 25px 30px;
    border-radius: 7px;
    background: #fff;
    box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}

.wrapper header {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
}

.wrapper form {
    margin: 35px 0 20px;
}

form .row {
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
}

form .row label {
    font-size: 18px;
    margin-bottom: 5px;
}

form .row:nth-child(2) label {
    font-size: 17px;
}

form :where(textarea, select, button) {
    outline: none;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
}

form .row textarea {
    resize: none;
    height: 110px;
    font-size: 15px;
    padding: 8px 10px;
    border: 1px solid #999;
}

form .row textarea::-webkit-scrollbar {
    width: 0px;
}

form .row .outer {
    height: 47px;
    display: flex;
    padding: 0 10px;
    align-items: center;
    border-radius: 5px;
    justify-content: center;
    border: 1px solid #999;
}

form .row select {
    font-size: 14px;
    background: none;
}

form .row select::-webkit-scrollbar {
    width: 8px;
}

form .row select::-webkit-scrollbar-track {
    background: #fff;
}

form .row select::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    border-right: 2px solid #ffffff;
}

form button {
    height: 52px;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    margin-top: 10px;
    background: #675AFE;
    transition: 0.3s ease;
}

form button:hover {
    background: #4534fe;
}

@media(max-width: 400px) {
    .wrapper {
        max-width: 345px;
        width: 100%;
    }
}

 JS:

const textarea = document.querySelector("textarea"),
    voiceList = document.querySelector("select"),
    speechBtn = document.querySelector("button");

let synth = speechSynthesis,
    isSpeaking = true;

voices();

function voices() {
    for (let voice of synth.getVoices()) {
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
        voiceList.insertAdjacentHTML("beforeend", option);
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text) {
    let utterance = new SpeechSynthesisUtterance(text);
    for (let voice of synth.getVoices()) {
        if (voice.name === voiceList.value) {
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", e => {
    e.preventDefault();
    if (textarea.value !== "") {
        if (!synth.speaking) {
            textToSpeech(textarea.value);
        }
        if (textarea.value.length > 80) {
            setInterval(() => {
                if (!synth.speaking && !isSpeaking) {
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech";
                } else {}
            }, 500);
            if (isSpeaking) {
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech";
            } else {
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech";
            }
        } else {
            speechBtn.innerText = "Convert To Speech";
        }
    }
});

Comments

Post a Comment

Popular posts from this blog

The Best AWS Institute in Hyderabad - Get Trained and Certified in AWS

-
Image
AWS training and certification in Hyderabad Amazon Web Services (AWS) is the most popular cloud computing platform, used by businesses of all sizes worldwide. AWS provides a wide range of cloud services, including computing, storage, and databases, to help organizations scale and grow efficiently. As more businesses move towards cloud computing, the demand for AWS professionals is on the rise. Therefore, it's crucial to learn AWS and gain expertise in it to stand out in the job market. Why AWS Training and Certification is Essential? AWS offers a range of certifications to validate and recognize the skills and knowledge of cloud professionals. The certifications are divided into different levels, such as foundational, associate, and professional, based on the complexity of the exam. AWS certifications are globally recognized and highly respected by employers, making them an essential requirement for anyone seeking a career in cloud computing. AWS certifications are not only a mark ...
Read more

Digital Marketing Agency: Gateway to Digital Excellence

-
Image
  Digital Marketing Agency: Gateway to Digital Excellence In the vast landscape of The digital marketing agency, where every click counts and every impression matters, there’s a partner that goes beyond the ordinary – Work Fellow. Step into a world where innovation meets strategy, and your business finds its digital home.   Who Are We  As The Digital Marketing Agency Team At Work Fellow, we’re not just a The digital marketing agency; we’re architects of online success, and collaborators in your journey to digital excellence. Our team comprises seasoned experts, each passionate about weaving compelling narratives, creating impactful campaigns, and propelling your brand to new heights. Why Choose Work Fellow As the Digital Marketing Agency: Tailored Strategies:   No two businesses are alike, and neither are our strategies. We take the time to understand your unique needs, goals, and challenges, creating customized plans that are as unique as your brand. Innovative Sol...
Read more

Why Cybersecurity Courses Are in High Demand

-
Image
  According to the above information, Due to the Rising Job Opportunities in Cybersecurity, We Started a Cybersecurity Course in Hyderabad With Real-time Trainers. First Know Cyber weapon in Cybersecurity course in Hyderabad Stuxnet first emerged in 2010, making headlines worldwide for its unprecedented sophistication and destructive capabilities. Initially discovered by cybersecurity experts, Stuxnet was unlike any malware seen before, specifically designed to target industrial control systems (ICS) and programmable logic controllers (PLCs) used in nuclear facilities and critical infrastructure. Targeting Iran's Nuclear Program While the true origins of Stuxnet remain shrouded in mystery, extensive analysis by cybersecurity researchers has revealed its primary target: Iran's nuclear program. It is believed that Stuxnet was developed as a covert operation by a nation-state, to sabotage Iran's uranium enrichment facilities, particularly the Natanz nuclear plant. It is Design...
Read more