The Voice Dictation app uses the Web Speech API to convert your spoken words into text. There’s a simple JavaScript API that lets you integrate Speech Recognition on any website.
The Web Speech API is currently implemented in Chrome and Firefox.
<div>
<a href="#" id="start_button" onclick="startDictation(event)">Dictate</a>
</div>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>
</div>
<script type="text/javascript">
var final_transcript = '';
var recognizing = false;
if ('webkitSpeechRecognition' in window) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function () {
recognizing = true;
};
recognition.onerror = function (event) {
console.log(event.error);
};
recognition.onend = function () {
recognizing = false;
};
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_transcript = capitalize(final_transcript);
final_span.innerHTML = linebreak(final_transcript);
interim_span.innerHTML = linebreak(interim_transcript);
};
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {
return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
function capitalize(s) {
return s.replace(s.substr(0, 1), function (m) {
return m.toUpperCase();
});
}
function startDictation(event) {
if (recognizing) {
recognition.stop();
return;
}
final_transcript = '';
recognition.lang = 'en-US';
recognition.start();
final_span.innerHTML = '';
interim_span.innerHTML = '';
}
</script>