jQuery Plugin Create Readable Text Using ResponsiveVoice Library - webSpeaker
File Size: | 7.04 KB |
---|---|
Views Total: | 3883 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
webSpeaker is a jQuery plugin that makes any text readable for blind users using the ResponsiveVoice.JS text to speech library. Also supports using your own audio tracks.
How to use it:
1. Load the latest version of jQuery and ResponsiveVoice.js in the document.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
2. Load the jQuery webSpeaker plugin's script after jQuery.
<script src="jquery.webSpeaker.js"></script>
3. Just call the function on the text container and done.
$('.speaker').webSpeaker();
4. Use custom audio track instead of ResponsiveVoice.JS.
$('.speaker').webSpeaker({ track:'test.mp3' responsiveVoice: false });
5. Specify the language for the web speaker.
$('.speaker').webSpeaker({ language: "en" // es, fr, ar ... });
6. You can also pass the options via HTML5 data
attributes as this:
<p class="speaker" data-track="test.mp3" data-responsive-Voice="false"> ... </p>
7. Style the play button using your own CSS.
.webSpeaker-button { -webkit-border-radius: 24; -moz-border-radius: 24; border-radius: 24px; padding: 10px 14px 11px 17px; color: rgb(255, 255, 255); font-size: 20px; border: 0; background: rgb(228, 104, 90); margin-left: 5px; } .webSpeaker-button:hover { background: rgb(228, 104, 55); }
This awesome jQuery plugin is developed by xc0d3rz. For more Advanced Usages, please check the demo page or visit the official website.