This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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