Speech Recognition Examples
Using speech recognition to fill an input-field and perform a web search.
Using speech recognition to fill an options list with alternative speech results.
Using continuous speech recognition to fill a textarea.
Using continuous speech recognition, showing final results in black and interim results in grey.
Example 1
<script type="text/javascript">
var recognition = new SpeechRecognition();
recognition.onresult = function(event) {
if (event.results.length > 0) {
q.value = event.results[0][0].transcript;
q.form.submit();
}
}
</script>
<form action="http://www.example.com/search">
<input type="search" id="q" name="q" size=60>
<input type="button" value="Click to Speak" onclick="recognition.start()">
</form>
Example 2
<script type="text/javascript">
var recognition = new SpeechRecognition();
recognition.maxAlternatives = 10;
recognition.onresult = function(event) {
if (event.results.length > 0) {
var result = event.results[0];
for (var i = 0; i < result.length; ++i) {
var text = result[i].transcript;
select.options[i] = new Option(text, text);
}
}
}
function start() {
select.options.length = 0;
recognition.start();
}
</script>
<select id="select"></select>
<button onclick="start()">Click to Speak</button>
Example 3
<textarea id="textarea" rows=10 cols=80></textarea>
<button id="button" onclick="toggleStartStop()"></button>
<script type="text/javascript">
var recognizing;
var recognition = new SpeechRecognition();
recognition.continuous = true;
reset();
recognition.onend = reset;
recognition.onresult = function (event) {
for (var i = resultIndex; i < event.results.length; ++i) {
if (event.results.final) {
textarea.value += event.results[i][0].transcript;
}
}
}
function reset() {
recognizing = false;
button.innerHTML = "Click to Speak";
}
function toggleStartStop() {
if (recognizing) {
recognition.stop();
reset();
} else {
recognition.start();
recognizing = true;
button.innerHTML = "Click to Stop";
}
}
</script>
Example 4
<button id="button" onclick="toggleStartStop()"></button>
<div style="border:dotted;padding:10px">
<span id="final_span"></span>
<span id="interim_span" style="color:grey"></span>
</div>
<script type="text/javascript">
var recognizing;
var recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interim = true;
reset();
recognition.onend = reset;
recognition.onresult = function (event) {
var final = "";
var interim = "";
for (var i = 0; i < event.results.length; ++i) {
if (event.results[i].final) {
final += event.results[i][0].transcript;
} else {
interim += event.results[i][0].transcript;
}
}
final_span.innerHTML = final;
interim_span.innerHTML = interim;
}
function reset() {
recognizing = false;
button.innerHTML = "Click to Speak";
}
function toggleStartStop() {
if (recognizing) {
recognition.stop();
reset();
} else {
recognition.start();
recognizing = true;
button.innerHTML = "Click to Stop";
final_span.innerHTML = "";
interim_span.innerHTML = "";
}
}
</script>
Speech Synthesis Examples
Spoken text.
Spoken text with attributes and events.
Example 1
<script type="text/javascript">
speechSynthesis.speak(SpeechSynthesisUtterance('Hello World'));
</script>
Example 2
<script type="text/javascript">
var u = new SpeechSynthesisUtterance();
u.text = 'Hello World';
u.lang = 'en-US';
u.rate = 1.2;
u.onend = function(event) { alert('Finished in ' + event.elapsedTime + ' seconds.'); }
speechSynthesis.speak(u);
</script>
