class Listener {
/** @private {boolean} */
public _connected = false;
public root = window;
public _isListening = false;
private setLanguage;
private _has_initialized = false;
isListening() {
return this._isListening;
}
public 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);
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
Play games in your browser for free, handcrafted by us here at OakFrame!
Unread — 1 minute read
Simple to Embed and Integrate We designed OakFrame to be easy to extend in order to provide further integration opportunities. If you prefer to run your own code in web development environments, you will be able to download the entire source from GitHub. You can build a full web application with OakFrame or a simple […]
Unread — 2 minute read
A complete, reliable, flexible, and cost-effective infrastructure is a fundamental requirement in modern companies. Design Systems are a philosophy focused on creating reproducible results in a wide range of industries. By following design systems, your organization will more strongly align its service and products, and eliminate time spent re-building or designing infrastructure as much as […]
Unread — 1 minute read
OakFrame is a design, development, and research firm located in Dallas, Texas, developing experiences for audiences around the globe. We provide technology that helps you engage with the most amazing people online. With a proven track record of building interactive digital experiences across desktop and mobile to connect people, our mission is to provide people […]
Unread — 1 minute read