jQuery Plugin Create Readable Text Using ResponsiveVoice Library - webSpeaker

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.