Lightweight jQuery Based Text To Speech Plugin - Articulate.js

Articulate.js is a lightweight (7kb minified) and easy-to-use jQuery text-to-speech plugin which enables the browser to speak aloud specified parts of your webpage using the Web Speech API.

More features:

• Allows to play/resume/stop the speaking.
• Allows to set the voice rate, pitch and volume.
• Text Manipulation supported. Allows to ignore, replace, recognize and customize text strings.
• Allows to config using HTML5 data attributes.

Basic usage:

1. Import both jQuery library and the jQuery Articulate.js script into the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="articulate.js"></script>

2. The JavaScript to read aloud a specific part of your webpage.

$(selector).articulate('speak');

3. Control the speaking with the following API methods.

// pause
$().articulate('pause');

// resume
$().articulate('resume');

// stop
$().articulate('stop');

4. Set the voice options.

// Sets the rate of the speaking voice
// default = 1.1; range = [0.1 - 10]
$().articulate('rate', *number*);

// Sets the pitch of the speaking voice; 
// default = 1.0; range = [0 - 2]
$().articulate('pitch', *number*); 

// Sets the volume of the speaking voice
// default = 1.0; 
$().articulate('volume', *number*);

5. Manipulate the text with the following API methods.

// Adds one or more HTML tags to the default array of ignored HTML tags; 
// omitting tagName clears the array of user-specified ignored HTML tags; 
$().articulate('ignore',*tagName,tagName,...*); 

// Removes one or more HTML tags from the default array of ignored HTML tags; 
// omitting tagName clears the array of user-specified recognized HTML tags; 
$().articulate('recognize',*tagName,tagName,...*);  

// Replaces oldText with newText when speaking; this is case-insensitive; 
// multiple pairs of text can be specified; 
// omitting parameters deletes previous replace commands
$().articulate('replace',*oldText,newText,...*);  

// Replaces default text spoken prior to the description of the HTML tags <img>, <table>, and <figure>; 
// omitting parameters reverts values to its defaults; 
$().articulate('customize',*tagName,prepend*); 

// Replaces default text spoken prior to and after the content of the HTML tags <q>, <ol>, <ul>, and <blockquote>; 
// omitting parameters reverts values to its defaults; 
$().articulate('customize',*tagName,prepend,append*); 

6. You're also able to manipulate the text using HTML5 data attributes as follows:

// element to ignore
data-articulate-ignore

// content from that DOM element is spoken, overriding the default
data-articulate-recognize

// content from that DOM element is spelled out
data-articulate-spell

// Specified text is spoken prior to the content of its DOM element
data-articulate-prepend=*text*  

// Specified text is spoken after to the content of its DOM element
data-articulate-append=*text* 

// Specified text is spoken in place of the content of its DOM element
data-articulate-swap=*text*

Change log:

• JS update

---

This awesome jQuery plugin is developed by acoti. For more Advanced Usages, please check the demo page or visit the official website.