<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 + "<br>"; | |
} | |
$('#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