speaktome-api
Version:
JavaScript modules for Mozilla's cloud speech recognition API
104 lines (93 loc) • 2.69 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>SpeakToMe</title>
<meta name="description" content="Example usage of SpeakToMe API component."></meta>
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
</style>
</head>
<body>
<section>
<h1>SpeakToMe - Mozilla Cloud-based Speech Recognition API</h1>
<section>
<label>Click [listen] and start speaking...</label>
<br><br>
<input placeholder="Type to test with voice synth" class="test" type="text"></input>
<button id="mic">Listen</button>
</section>
<section>
<div class="results">
</div>
</section>
</section>
<script src="build/stm_web.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize
var stm = SpeakToMe({
listener: listener
});
// Mic/Stop button
var button = document.querySelector('#mic');
// Set a handler for results
function listener(msg) {
//console.log('listener', msg);
if (msg.state == 'result') {
// Display results
var results = msg.data.sort(function(a, b) { a.confidence - b.confidence; });
var resultsView = document.querySelector('.results');
resultsView.innerHTML = '';
results.forEach(function(result) {
resultsView.innerHTML += '"' + result.text +
'", confidence: ' + result.confidence + '<br>';
});
}
else if (msg.state == 'ready') {
button.innerText = "Listen";
button.listening = false;
}
}
// Helper for speech synth
function say(text) {
return new Promise(function(resolve, reject) {
var synth = window.speechSynthesis;
var utterThis = new SpeechSynthesisUtterance(text);
utterThis.onend = function() {
resolve();
};
synth.speak(utterThis);
});
}
function onMicClick() {
// Manual stop by user
if (button.listening) {
button.listening = false;
stm.stop();
button.innerText = "Listen";
}
// User initiating listen
else {
stm.listen();
button.innerText = "Stop Listening (or just stop speaking)";
button.listening = true;
// testing
var testText = document.querySelector('.test').value;
if (testText) {
setTimeout(function() {
say(document.querySelector('.test').value);
}, 500);
}
}
}
button.addEventListener('click', onMicClick);
});
</script>
</body>
</html>