D4mations.com

JavaScript Speech Recognition #JavaScript30 20/30



Today we learn how to use the built in Speech Recognition in the browser. Grab all the exercises and starter files over at https://JavaScript30.com

Original source

d4mer

, , , , , , , , , , , , , , , ,

27 responses to “JavaScript Speech Recognition #JavaScript30 20/30”

  3. Well it's time to put voice control to my website. I am not sure how smart it is but hey, it's a competition. If face Id didn't win it last year, this doesn't have much chance but this combined with image recognition I think will be enough. We will see.

  6. Yep I have the same problem, I just leave it running and usually use it for my comments, usually making a LIRI, just a clone from Siri mainly. It recognizes a lot of my speech but some stuff I still have to ride out, and it's really bad with pops and S's.
    .

  8. Dammit I can't get it to work, but it seems to recognise the sound… so the problem isn't the microphone. I tried the finished one just to check if it was related to my code but nope 🙁

  11. Mine is not working .. please find the below code .. Could any one please help me where i was wrong??

    <!DOCTYPE html>

    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>Speech Detection</title>
    </head>

    <body>

    <div class ="words" contenteditable>
    </div>

    <script>

    window.SpeechRecognition = window.SpeechRecognition || Window.webkitSpeechRecognition;

    const recognition = new SpeechRecognition();
    recognition.interimResults= true;
    recognition.lang = 'en-US';

    let p = document.createElement('p');
    const words = document.querySelector('.words');
    words.appendChild(p);

    recognition.addEventListner('result', e =>{
    const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');

    p.textContent = transcript;

    if (e.results[0].isFinal) {
    p=document.createElement('p');
    words.appendChild(p);
    }

    console.log(transcript);

    });

    recognition.addEventListner('end', recognition.start);

    recognition.start();

    </script>

    <style>

    html
    {
    font-size: 10px;

    }

    body
    {
    background:#ffc600;
    font-family: 'helvwtica neue';
    font-weight: 200;
    font-size: 20px;
    }

    .words{
    max-width:500px;
    margin:50px auto;
    background:white;
    border-radius:5px;
    box-shadow:10px 10px 0 rgba(0,0,0,0.1);
    padding:1rem 2rem 1rem 5rem;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background-size: 100% 3rem;
    position: relative;
    line-height:3rem;
    }
    p {
    margin: 0 0 3rem;
    }
    .words:before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
    }

    </style>

    </body>
    </html>

  24. Hey there, I am quite new to js and I just started learning node/server-side js, so I was wondering if you actually needed to create a separate js file for your local host server. For example:

    // Dependencies
    var http = require("http");
    var fs = require("fs");

    // Set port to 8080
    var PORT = 8080;

    // Create server
    var server = http.createServer(handleRequest);

    // Create a function for handling requests and responses coming into server
    function handleRequest(req, res) {

    // Here we use the fs package to read our index.html file
    fs.readFile(__dirname + "/index.html", function(err, data) {

    // We then respond to the client with the HTML page by specifically telling the browser that we are delivering
    // an html file.
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(data);
    });
    }

    (add some other stuff)

    // Starts server
    server.listen(PORT, function() {
    console.log("Server is listening on PORT: " + PORT);
    });

    and of course all of the node modules and npm packages. Any help regarding running the app with a server would be greatly appreciated. Thanks so much!!

  27. I'm having trouble with getting any text to show in the console on Windows. The <p> innerHTML is not updating, so to print e.result is not even working. My mic is being picked up in the browser and I've run the npm commands, apache on xampp is running, not sure what I'm doing wrong. Any ideas?

Leave a Reply