This tutorial provides a quick way to access the host operating system's TTS from Javascript running on your own web page. The advantage is that the TTS will be more responsive and you don't have to worry about setting up your own speech server. For now, accessing the local TTS requires a browser extension, although proposed additions to HTML may make this a native feature of the browsers eventually.
As a first step, you'll need to download and install the Chrome Extension.
The package is just a zip file (with a different extension) -- unpack it to see what's inside. The extension is a slightly modified version of the one available here from Google: Sample Extension. The main modification is that we've added a DOM Mutation event listener that detects the signal from the web page that it would like to have something spoken. As written, this allows any web page to access speech via the extension, which may not be what you want (although I believe it is fairly secure).
To speak on your web page, you'll need the associated Javascript library. It is remarkably small, containing only the following function:
function speak(str) {
var div = document.getElementById('speak-div');
if(!div) {
div = document.createElement('div');
div.style.position = "absolute";
div.style.left = "-1000px";
document.body.appendChild(div);
}
div.innerText = str;
}
Essentially, what this function does is create and modify an offscreen DIV element that the associated Chrome extension has been said to watches to changes to. Whatever the DIV's innerText changes to is what is spoken. To use it, just call speak("Your Test Here") and you should hear it spoken aloud. Here's a web page that shows how to use it:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script src="chrome-speak.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {speak('hello')}, true);
</script>
<body>
<input type="text" id="text" value="Say This"><br>
<input type="button" onclick="speak($('#text').val());" value="Click me!">
</body>
</html>