27 thoughts on “JavaScript Speech Recognition #JavaScript30 20/30

  • February 23, 2019 at 15:10
    Permalink

    For the transcript, the below code works well:

    const transcript = e.results[0][0]['transcript'];

    I don't know why we should turn transcript into array then join?

  • February 23, 2019 at 15:10
    Permalink

    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.

  • February 23, 2019 at 15:10
    Permalink

    Great stuff! People are very slow to adapt to innovation. This video is a perfect example. It was done over a year ago and there is not much out there.

  • February 23, 2019 at 15:10
    Permalink

    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.
    .

  • February 23, 2019 at 15:10
    Permalink

    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 ­čÖü

  • February 23, 2019 at 15:10
    Permalink

    const transcript = e.results[0][0].transcript
    instead of
    const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join("")
    seems also possible

  • February 23, 2019 at 15:10
    Permalink

    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>

  • February 23, 2019 at 15:10
    Permalink

    Your video is very confusing and I have no idea how to set it up, so you should do a video from the beginning so I know how to setup Speech Recognition on Mozilla Firefox easy step by step instructions so I can have more understanding what to do.

  • February 23, 2019 at 15:10
    Permalink

    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!!

  • February 23, 2019 at 15:10
    Permalink

    Im new to programming and I was wondering what I have to watch/do or if I even need that outher stuff that is there from the beginning.

  • February 23, 2019 at 15:10
    Permalink

    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