Search This Blog

Ads by Adsterra

Speech to Text with JavaScript | Speech to Text App | JS

Speech to Text with JavaScript
Convert Speech to text
In today's video, I will show you how to convert speech to text with the help of JavaScript.

Source code to create a Speech to Text App with JavaScript


<!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>Speech to text in js</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition -->
    <!-- new webkitSpeechRecognition() || new SpeechRecognition()-->
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        form * {
            width: 50%;
        }

        textarea {
            height: 250px;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <form>
        <h1>Speech To Text App</h1>
        <textarea></textarea>
        <button type="submit">Speak!</button>
        <button type="button">Stop</button>
    </form>
    <script>
        let form = document.querySelector("form");
        let sr = window.webkitSpeechRecognition || window.SpeechRecognition;
        let spRec = new sr();
        spRec.lang = "hi";
        spRec.continuous = true;
        spRec.interimResults = true;
        // console.log(spRec);
        form.addEventListener("submit", e => {
            e.preventDefault();
            spRec.start();
        })
        spRec.onresult = res => {
            let text = Array.from(res.results)
                .map(r => r[0])
                .map(txt => txt.transcript)
                .join("");
            form[0].value = text;
            // console.log(text);
        }
        form[2].addEventListener("click", () => {
            spRec.stop()
        })
    </script>
</body>
</html>

No comments:

Post a Comment