David Walsh (colleague and web developer) has launched his new Speech Recognition system. It’s currently available as a jQuery plugin but he has promised that version 2 will bring a full featured API.
What can you do with it?
The TTS plugin can read out any text from your website to your visitors. It would be a great aid in terms of accessibility, and of course you could probably think up other more fun uses of it too. You could annoy users by reading out your terms and conditions to them or have your website tell visitors how awesome it is on every single page.
It would actually be nice to tell users the next action that’s required from them. For example, you could read out form validation errors or after running an AJAX request you could read the success/failure message and so on.
Example
Here’s a basic example showing you how to use this plugin. First you need jQuery on your page if you haven’t got it already, and a link to the TTS plugin itself. I use Google for jQuery because it means you’re saving the bandwidth on your own server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://chachakawooka.com/js/cckw_tts.js"></script>
In your webpage you need an element which is going to contain the text to convert to voice. For this example I’m using an input box but it could be any element (just make sure it has a unique id). You also need a trigger (button or link) which will start the conversion.
<input type="text" id="my-speech" /> <input type="submit" id="my-speech-submit" value="Convert text to speech" />
Finally we attach the elements above to the TTS plugin.
<script type="text/javascript">
$(document).ready(function() {
$('#my-speech-submit').cckwTTS({
selector: '#my-speech'
});
});
</script>
Demo
Here’s the above example code implemented for you to see what it does!
Notes
- For this example I’ve put the JavaScript code inline but try to keep it together in the footer (I prefer loading JavaScript after everything) or in the <head> if that’s what you prefer.
- David has said thanks for this post and has updated his own blog to use my example.
- This plugin is still in its early stages and I’m sure David would appreciate all feedback and feature requests. If you want to get in touch just Tweet <a href=”http://twitter.com/chachakawooka”>@chachakawooka</a> on Twitter.
Credits
The CCKW Text-To-Speech Plugin is created and developed by David Walsh at Chachakawooka.
PS: this guy’s the proper David Walsh, not the guy who develops MooTools.
It’s dead, Jim.
Nice plugin. Thanks.
# I have the same issue what Gary mentioned. Is there a way to increase volume ?
# Can we just pass the text as argument without any trigger (link/button) ?
Thank you.
Hi David,
I really like your tts js example. Is there way to modify the voicing to be a little louder? I have to turn my volume all the way up and then I can verily here it on most of the computers I’ve tried it on.
Gary
Hi David,
I am trying to use that plugin for generating voice from text. But I am unable to do that.
Please help me. How is it works?
Thanks
Hi David,
Thanks for you plug in. With this plug-in I was able to generate voice.
Thanks for you work.
Venkat