Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
<script>
$(document).ready(function() {
// Check whether the browser is capable of speech synthesis
if (window.speechSynthesis != 'undefined') {
// Basic demo
$("#demo_1").on('click', function(e) {
var u = new SpeechSynthesisUtterance('You have reached your destination');
window.speechSynthesis.speak(u);
e.preventDefault();
});
// Alternate syntax for basic demo
$("#demo_2").on('click', function(e) {
var u = new SpeechSynthesisUtterance();
u.text = 'Turn left at the next intersection';
window.speechSynthesis.speak(u);
e.preventDefault();
});
// Fetch list of available voices
$("#demo_3").on('click', function(e) {
e.preventDefault();
var voices = window.speechSynthesis.getVoices();
var text = '';
for(var i = 0; i < voices.length; i++ ) {
text += "Voice " + i.toString() + ' ' + voices[i].name + "<br>";
}
$('#voices').html(text);
});
// Specify a voice
$("#demo_4").on('click', function(e) {
var u = new SpeechSynthesisUtterance();
u.text = 'Take the second exit on the roundabout';
var voices = window.speechSynthesis.getVoices();
u.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
window.speechSynthesis.speak(u);
e.preventDefault();
});
// Apply rate/pitch/volume options - some voices ignore these options
$("#demo_5").on('click', function(e) {
var u = new SpeechSynthesisUtterance();
u.text = 'You have driven right past your destination';
u.lang = 'en-US';
u.rate = 0.5;
u.pitch = 1.5;
u.volume = 0.5;
var voices = window.speechSynthesis.getVoices();
u.voice = voices.filter(function(voice) { return voice.name == 'Fred'; })[0];
window.speechSynthesis.speak(u);
e.preventDefault();
});
} else {
alert("Sorry - the Speech Synthesis API is not available in your Browser");
}
});
</script>
<p>Note that one or more of these demos may not work on your browser/OS combination...</p>
<h2>Demo 1: Simple Example</h2>
<p>Create a new SpeechSynthesisUtterance and speak it...</p>
<pre><code class='javascript'>
var u = new SpeechSynthesisUtterance('You have reached your destination');
speechSynthesis.speak(u);
</code></pre>
<input type="button" id="demo_1" value="Speak to Me">
<h2>Demo 2: Example with options</h2>
<p>Create a new SpeechSynthesisUtterance with options and a callback</p>
<pre><code class='javascript'>
var u = new SpeechSynthesisUtterance();
u.text = 'Turn left at the next intersection';
window.speechSynthesis.speak(u);
</code></pre>
<input type="button" id="demo_2" value="Speak to Me">
<h2>Demo 3: Get Voices</h2>
<p>Fetch a list of the available voices </p>
<pre><code class='javascript'>
var voices = window.speechSynthesis.getVoices();
var text = '';
for(var i = 0; i < voices.length; i++ ) {
text += "Voice " + i.toString() + ' ' + voices[i].name + "&lt;br&gt;";
}
$('#voices').html(text);
</code></pre>
<input type="button" id="demo_3" value="Get Voices">
<div id='voices'></div>
<h2>Demo 4: Specify a Voice</h2>
<p>Specify a different voice</p>
<pre><code class='javascript'>
var u = new SpeechSynthesisUtterance();
u.text = 'Take the second exit on the roundabout';
voices = window.speechSynthesis.getVoices();
u.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
window.speechSynthesis.speak(u);
</code></pre>
<input type="button" id="demo_4" value="Speak to Me">
<h2>Demo 5: More options</h2>
<p>Decreased rate of speech and volume, increased pitch... </p>
<p>NOTE - not all options work with all voices</p>
<pre><code class='javascript'>
var u = new SpeechSynthesisUtterance();
u.text = 'You have driven right past your destination';
u.lang = 'en-US';
u.rate = 0.5;
u.pitch = 1.5;
u.volume = 0.5;
var voices = window.speechSynthesis.getVoices();
u.voice = voices.filter(function(voice) { return voice.name == 'Fred'; })[0];
window.speechSynthesis.speak(u);
</code></pre>
<input type="button" id="demo_5" value="Speak to Me">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment