Hi friends, this post explains about jquery plugin for converting text to speech. It is a simple plugin and it can be use in your web applications. This posts explains in several steps.
1. Plugin Name
2. Voices
3. Usage
4. Architecture
5. Code
6. Demo
Plugins
SpeakClient.js
Voices
More than 200+ accent voices
Usage
Just add speakClient.js on header
Add function in your javascript code or jQuery code speak(“hi this is speak plugin tutorial”)
Architecture
When ->-> Speak() function get chance to call they get data from speakClient.js and load speakWorker.js in a web browser (background process) around speakGenerator.js. Convert our text to wav format and return to speak function. Then plays html audio content.
Explains architecture in a picture
Code
<input type="submit" onClick="speak('hello this is jQuery Tutorial')" value="speak">
Or
<script src="jquery.min.js"></script>
<script src="speakClient.js"></script>
<script>
$(function(){
$('#link').click(function()
{
Speak('this is anil ');
});
});
</script>
<a href="#" id="link" >CLICK HERE TO SPEAK</a>
<script src="speakClient.js"></script>
<script>
$(function(){
$('#link').click(function()
{
Speak('this is anil ');
});
});
</script>
<a href="#" id="link" >CLICK HERE TO SPEAK</a>
Complete Code
<html>
<head>
<title>jQuery plugin for Text to Speech - demo</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="speakGenerator.js"></script>
<script src="speakClient.js"></script>
<script>
var j = jQuery.noConflict();
j(document).ready(function() {
j('#link').on('click', function()
{
speak('this is anil ');
});
});
</script>
<style type="text/css">
body { text-align: center; }
#container { margin: 0 auto; width: 900px; }
#button { background: none repeat scroll 0 0 green;color: white;font-size: 40px;}
#link { font-size:20px;}
</style>
</head>
<body>
<div id="container">
<button id="button" onclick="speak('Hello world welcome to Anil Labs')">Talk</button>
<div id="audio"></div>
<br /><br />
(or)
<br /><br />
<a href="#" id="link" >CLICK HERE TO SPEAK</a>
</div>
</body>
</html>
<head>
<title>jQuery plugin for Text to Speech - demo</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="speakGenerator.js"></script>
<script src="speakClient.js"></script>
<script>
var j = jQuery.noConflict();
j(document).ready(function() {
j('#link').on('click', function()
{
speak('this is anil ');
});
});
</script>
<style type="text/css">
body { text-align: center; }
#container { margin: 0 auto; width: 900px; }
#button { background: none repeat scroll 0 0 green;color: white;font-size: 40px;}
#link { font-size:20px;}
</style>
</head>
<body>
<div id="container">
<button id="button" onclick="speak('Hello world welcome to Anil Labs')">Talk</button>
<div id="audio"></div>
<br /><br />
(or)
<br /><br />
<a href="#" id="link" >CLICK HERE TO SPEAK</a>
</div>
</body>
</html>
nice one, ready to use it on my website:)
Hi, great article, please you know how change the language?
Thanks advanced
Wow, Thanks for this informative post you have here. I heard about some text voice that has features that can an easy create and use platform, that allows users alternative methods to process written information. Is this something that most text to speech needs?
Hi Anil, this one not working in chrome
, i need to download any kind of plugins to support chrome