Adding TTS ( Text to Speech ) to your website
Hello my dear pal and friends,
The post is all about how to add TTS a functionality of Text To Speech to your website.This feature makes the text written on a webpage to be spoken out from your speaker.This is especially helpful to visually impaired people and for them traversing website becomes easier.
So let's begin.Let's explain the core of this functionality . The best way to add TTS to your website is to use "Speak. js " files and get them integrated to your project.We need 3 files to add TTS to our Website :
1)speakclient.js
2)speakworker.js
3)speakgenerator.js
These 3 files can be found from github of speak.js @ https://github.com/kripken/speak.js
Now put these files in your project web folder or to say just include these files in your project (say in js folder).
Also change the 3rd line in speakClient.js to point to your JS folder :
speakWorker = new Worker('js/speakWorker.js')
Now what we gonna do is just we will ask users to just select the text which the user wants to get spoken and click an a speak button and then the text will get spoken.
1) So for this add this javascript function func( ) to the button where the user will click after selecting text :
Ads
<script src="speakClient.js"></script>
3) Now add this line below the button code in the body section example
<button onclick="func()" >Select a text and click here for speech</button>
<div id="audio"></div>
this line tells the linking to speak execution
That's it .when you will select the text and click the button it will speak that text , thus the TTS something of an examplelike this :
The post is all about how to add TTS a functionality of Text To Speech to your website.This feature makes the text written on a webpage to be spoken out from your speaker.This is especially helpful to visually impaired people and for them traversing website becomes easier.
So let's begin.Let's explain the core of this functionality . The best way to add TTS to your website is to use "Speak. js " files and get them integrated to your project.We need 3 files to add TTS to our Website :
1)speakclient.js
2)speakworker.js
3)speakgenerator.js
These 3 files can be found from github of speak.js @ https://github.com/kripken/speak.js
Now put these files in your project web folder or to say just include these files in your project (say in js folder).
Also change the 3rd line in speakClient.js to point to your JS folder :
speakWorker = new Worker('js/speakWorker.js')
Now what we gonna do is just we will ask users to just select the text which the user wants to get spoken and click an a speak button and then the text will get spoken.
1) So for this add this javascript function func( ) to the button where the user will click after selecting text :
<script type="text/javascript">
function func()
{var x=window.getSelection();
speak (x.toString());
}
</script>
function func()
{var x=window.getSelection();
speak (x.toString());
}
</script>
Now this will evaluate which text is select and then it will call speak function
2) So now add this to head section of your page
<script type="text/javascript" src="http://vozme.com/get_text.js"></script><script src="speakClient.js"></script>
3) Now add this line below the button code in the body section example
<button onclick="func()" >Select a text and click here for speech</button>
<div id="audio"></div>
this line tells the linking to speak execution
That's it .when you will select the text and click the button it will speak that text , thus the TTS something of an examplelike this :
Comments