🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

webSpeaker is a jQuery plugin that makes any text readable for blind users using the ResponsiveVoice.JS text to speech library

speech

Documentation

jQuery webSpeaker Plugin

jQuery webSpeaker is a jQuery that makes any text readable for blind users using responsiveVoice text to speech library.Also supports using your own audio tracks

Demo

webSpeaker Demo

Requirements:

jQuery webSpeaker requires the latest version of jQuery and responsiveVoice (Free API to use TTS).

Usage:

There are two main approaches to using this plugin: through data attributes on DOM nodes, and through JS options explicitly passed to the webSpeaker function.

These two methods can be mixed and matched as well. Data attributes takes precedence over JS options.

Data Attributes

This approach allows you to define data-* attributes on whatever DOM element.This is useful when you already know the values at the time that you are constructing the DOM.

Use responsiveVoice

You must add the following code before using responsiveVoice.

<script type="text/javascript" src="https://code.responsivevoice.org/responsivevoice.js"></script>
<p class="speaker">Hello World</p>  <script type="text/javascript">    $('.speaker').webSpeaker();  </script> <script type="text/javascript" src="https://code.responsivevoice.org/responsivevoice.js"></script>
Set an audio track
<p class="speaker"    data-track="audio track link"  data-responsive-Voice="false">Hello World</p>    <script type="text/javascript">       $('.speaker').webSpeaker();     </script>

Refer to the Options section below for more info on the various options available.

JavaScript Options

This approach allows you to pass values to the webSpeaker function. This is useful when you don't know the values at the time the DOM is being rendered.

Use responsiveVoice
<p class="speaker">Hello World</p>     <script type="text/javascript">       $('.speaker').webSpeaker({        language:"en"        });     </script>
Set an audio track
<p class="speaker"></p>     <script type="text/javascript">       $('.speaker').webSpeaker({         track:"audio track link"       });     </script>

Refer to the Options section below for more info on the various options available.

Options:

A complete listing of the options that can be passed to the webSpeaker method is below.

Option Data Attribute Method Default Description
text data-text string Element text Set text
language data-language en : UK English Female
es : Spanish Female
fr : French Female
ar : Arabic Male
More voices
en The voice language of responsiveVoice.
playType data-play-Type button : will play on click the button near the specification element
hover : will play on mouse over
button Play method/type
playIcon data-play-Icon Accept any html 🔊 Play button icon
track data-track Accept URLs false Set an audio track url
responsiveVoice data-responsive-Voice boolean true Enable responsiveVoice

Created By:

xC0d3rZ

License:

jQuery-webSpeaker is released under the MIT license.


You May Also Like