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
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:
License:
jQuery-webSpeaker is released under the MIT license.