Speech Recognition and Speech Synthesis with pure JavaScript

by bizamajig

HTML

<div class="container">
    <div id="message" class="message">Click "Talk" and begin speaking.</div>
    <div class="todo"> <span id="final_span" class="final"></span>
 <span id="interim_span" class="interim"></span>

    </div>
    <div class="controls">
        <button id="talk_button" class="button" onclick="talkWithApp(event)">Talk</button>
        <select id="language" class="select">
            <option value="en-GB">English</option>
            <option value="it-IT">Italian</option>
        </select>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: #f0f0f0;
}
.container {
    width:98%;
    margin:auto;
    max-width:680px;
}
.message {
    color:#999;
    font-size:16px;
    font-family:Verdana, Geneva, sans-serif;
    padding: 1em 0;
}
.todo {
    min-height:6em;
    background-color: #ffc;
    margin-bottom: 0.5em;
    padding: 1em;
    color:#999;
    font-size:2.5em;
    font-family:Verdana, Geneva, sans-serif;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #ccc;
    border-left: 20px solid #ff6;
    border-top: 1px solid #ddd;
    -webkit-box-shadow: 0 0px 3px #BDBDBD;
    box-shadow: 0 0px 3px #BDBDBD;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
    transition: all 0.3s ease-in-out;
}
.controls {
    text-align:center;
}
.button {
    width: 200px;
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
    padding: 10px 16px;
    font-size: 18px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
}
.button:hover {
    background-color: #3276b1;
    border-color: #285e8e;
}
.select {
    background:#f0f0f0;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px 16px;
    font-size: 18px;
}
.final {
    color: #999;
}
.interim {
    color: #CCC;
}

JavaScript

var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;

// Speech Recognition
if (!('webkitSpeechRecognition' in window)) {
    message.innerHTML = 'Web Speech API is not supported by this browser. Upgrade to <a href="//www.google.com/chrome">Chrome</a> version 25 or later.';
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function () {
        recognizing = true;
        message.innerHTML = 'Speak now.';
        talk_button.innerHTML = 'Listen';
    };

    recognition.onresult = function (event) {
        var interim_transcript = '';
        for (var i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript += event.results[i][0].transcript;
            } else {
                interim_transcript += event.results[i][0].transcript;
            }
        }
        final_span.innerHTML = final_transcript;
        interim_span.innerHTML = interim_transcript;
    };

    recognition.onend = function () {

        recognizing = false;
        if (ignore_onend) {
            return;
        }
        speechMyText(final_transcript);
        if (!final_transcript) {
            message.innerHTML = 'Click "Talk" and begin speaking.';
            talk_button.innerHTML = 'Talk';
            return;
        }
    };

    recognition.onerror = function (event) {
        if (event.error == 'no-speech') {
            message.innerHTML = 'No speech was detected.';
            ignore_onend = true;
        }
        if (event.error == 'audio-capture') {
            message.innerHTML = 'No microphone was found. Ensure that a microphone is installed.';
            ignore_onend = true;
        }
        if (event.error == 'not-allowed') {
            if (event.timeStamp - start_timestamp < 100) {
                message.innerHTML = 'Permission to use microphone...