In this post we will show how to add text to speech support to your web pages , simplified steps will be followed for that.
We will use eSpeak which is open source project: http://espeak.sourceforge.net/
Link: http://espeak.sourceforge.net/
1) Create Java Web Application : (or HTML page)
2) Create folder JS and place the following files:
- speakWorker.js
- speakGenerator.js
- speakClient.js
3) Edit speakClient.js and change the 3rd line in the file to point to your JS folder :
speakWorker = new Worker('js/speakWorker.js');
4) Create JSP pages (or HTML page) :
a) Add the following JS imports in the header:
<script src="js/speakGenerator.js"></script>
<script src="js/speakClient.js"></script>
b) Add this function in the header as well:
<script>
function textToSpeech(text){
// you can change any of these voice characteristics
speak(text, { amplitude: 100, wordgap: 1, pitch: 50, speed: 175 });
}
</script>
c) Add this div to your page body :
<div id="audio"></div>
5) In your page use the function we have just created like this:
I have added small icon beside each filed to text to speech its content in human friendly way : Name is ..., City is ...., Country is ......
Name : <input type="text" name="name" id="name" size=50 value="Osama Oransa"><img src="images/tts.png" onclick="textToSpeech('Name is '+document.forms[0].name.value); return false" style="cursor:pointer;vertical-align: middle">
The nice thing in this open source project that it support a lot of languages and different voice with ability to tune each voice using many features and if you didn't find your language you can generate the speech generator for it.
We will use eSpeak which is open source project: http://espeak.sourceforge.net/
Link: http://espeak.sourceforge.net/
1) Create Java Web Application : (or HTML page)
2) Create folder JS and place the following files:
- speakWorker.js
- speakGenerator.js
- speakClient.js
3) Edit speakClient.js and change the 3rd line in the file to point to your JS folder :
speakWorker = new Worker('js/speakWorker.js');
4) Create JSP pages (or HTML page) :
a) Add the following JS imports in the header:
<script src="js/speakGenerator.js"></script>
<script src="js/speakClient.js"></script>
b) Add this function in the header as well:
<script>
function textToSpeech(text){
// you can change any of these voice characteristics
speak(text, { amplitude: 100, wordgap: 1, pitch: 50, speed: 175 });
}
</script>
c) Add this div to your page body :
<div id="audio"></div>
5) In your page use the function we have just created like this:
I have added small icon beside each filed to text to speech its content in human friendly way : Name is ..., City is ...., Country is ......
Name : <input type="text" name="name" id="name" size=50 value="Osama Oransa"><img src="images/tts.png" onclick="textToSpeech('Name is '+document.forms[0].name.value); return false" style="cursor:pointer;vertical-align: middle">
The nice thing in this open source project that it support a lot of languages and different voice with ability to tune each voice using many features and if you didn't find your language you can generate the speech generator for it.
thanks for the tutorial.It was really good.
ReplyDeleteThe html page is working fine in FF and IE.. But its not working in chrome .. how do you make it to work in chrome.
You are welcome, actually it depends on browser support to generate the audo file , so I'm surprised it worked on IE and didn't work on Chrome :) .. So I've no thing to help you on this, you may try to upgrade chrome or check what JS error.
DeleteIt worked in Ie because i used a activxobject.And Firefox its working fine anyways..Its not working in safari,chrome.
DeleteOK, can you post the needed steps to make it works in IE ?
Deleteint he TTS function u need to add this following lines of code
Deleteif (navigator.appName == 'Microsoft Internet Explorer')
{
var Obj = new ActiveXObject("Sapi.SpVoice");
var string=document.getElementById("ts").value;
Obj.Speak(string, 1 );
}
else if (navigator.appName == 'Netscape')
{
//do something for chrome and safari
}else
{
//for firefox
speak(str);
}
Hello, can you send me the js files? also the html files. thanks
Delete