Valid HTML5 Javascript Voice Input & Speech to Text

class Listener { isListening() { return this._isListening; } start() { const self = this; const synth = window['speechSynthesis']; let utterance = new window['SpeechSynthesisUtterance'](); utterance.lang = 'en-US'; function synthVoice(text, cb) { utterance = new window['SpeechSynthesisUtterance'](text); utterance.rate = 1.5; //utterance.text = text; synth.speak(utterance); utterance.onend = function (evt) { cb(evt); } } /** * @nocollapse */ let recognition = null; recognition = (window['webkitSpeechRecognition'] || window['SpeechRecognition'] || window['mozSpeechRecognition'] || window['msSpeechRecognition'] || window['oSpeechRecognition']) || recognition; if (!recognition) { return false; } recognition = new recognition(); var lastStartedAt = new Date().getTime(); var autoRestartCount = 0; var debugState = true; this.setLanguage = function (lang) { utterance.lang = lang; }; let container = document.getElementById("voicebox"), transcript, potential; if (!self._has_initialized) { transcript = document.createElement("div"); transcript.style.width = "100%"; transcript.id = "transcript"; potential = document.createElement("input"); potential.readOnly = true; potential.id = "potential"; container.appendChild(transcript); container.appendChild(potential); self._has_initialized = true; } else { transcript = document.getElementById("transcript"); potential = document.getElementById("potential"); } recognition['continuous'] = false; recognition['interimResults'] = true; //recognition['lang'] = 'sw-SW'; //recognition['lang'] = 'de-DE'; //recognition['lang'] = 'en-US'; recognition['onresult'] = function (event) { var interim_transcript = ''; var final_transcript = ''; for (var i = event['resultIndex']; i < event['results'].length; ++i) { if (event['results'][i]['isFinal']) { final_transcript += event['results'][i][0]['transcript']; if (self._isListening) { let sentence = document.createElement("span"); sentence.className = "sentence"; sentence.innerHTML = final_transcript + ".   "; transcript.appendChild(sentence); potential.value = ""; if (document.activeElement.getAttribute('type') == "text") { } } } else { interim_transcript += event['results'][i][0]['transcript']; potential.value = interim_transcript; } } if (final_transcript.indexOf('enable voice') !== -1) { if (!self._isListening) { synthVoice('Hello Friend!', function () { }); self._isListening = true; } } if (final_transcript.indexOf('set language english') !== -1) { recognition['lang'] = 'en-US'; } if (final_transcript.indexOf('set language spanish') !== -1) { recognition['lang'] = 'es'; } if (final_transcript.indexOf('set language german') !== -1) { recognition['lang'] = 'de'; } if (final_transcript.indexOf('goodbye neighbor') !== -1) { self._isListening = false; } console.log(interim_transcript, self._isListening); }; recognition['onend'] = function () { var timeSinceLastStart = new Date().getTime() - lastStartedAt; autoRestartCount += 1; if (autoRestartCount % 10 === 0) { if (debugState) { console.warn('Speech Recognition is repeatedly stopping and starting. See http://is.gd/annyang_restarts for tips.'); } } if (timeSinceLastStart < 10000) { setTimeout(function () { lastStartedAt = new Date().getTime(); recognition.start(); }, Math.max(1, 5000 - timeSinceLastStart)); } else { recognition.start(); } }; recognition.start(); } } let listener = document.createElement('div'); listener.id="voicebox"; print(listener); print(p("Get close to your microphone and say 'Enable Voice', your transcript will now be logged.")) if (listener) { let input = new Listener(); input.start(); }
  • annyang! A tiny javascript SpeechRecognition library that lets your users control your site with voice commands.

Explore OakFrame

    Games

    Play games in your browser for free, handcrafted by us here at OakFrame!

    Oak Studio Documentation

    Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration...

    Design Systems

    A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies....

    About OakFrame

    OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences...