Jekyll One

QuickSearch

Speech synthesis is an application programming interface (API) in web development that allows web browsers to generate synthesized speech, commonly known as text-to-speech (TTS). It enables developers to incorporate speech synthesis functionality into web pages, applications, and other online experiences.

With the speech synthesis API, you can convert text into speech, and the synthesized speech can then be played through the user’s speakers or headphones. Spoken content is especially useful for making web content more accessible to individuals with visual impairments and for adding interactive voice elements to web applications.

J1 Template Integration

Speak2Me, a speech synthesise module for J1 Template, enables a so-called Text-To-Speech converter. The converter functionality allows users to sit back and listen to the browser read aloud the important contents on a Web page.

Longer texts on Chromium-based browsers like Chrome, Edge, or Opera using the standard Speech API will be canceled automatically after 15 seconds. This is fixed by the module Speak2Me by sending pause-resume signals every 10 seconds.

Additionally, the module is chunking the text to be spoken. Speak2Me implements a virtual pause-resume strategy to reconstruct the API functions for pause and resume. On a pause, technically, a stop is sent to the Speech-API. If the speech output is resumed, the speech out continues on the last spoken chunk by stating a new session with the Speech-API.

API Reference

Leverage the powerful selector options of jQuery to specify which parts of the Web page that you want spoken. For example, depending on how you have the Web page organized, a single line of code, like the following, can direct Speak2Me to speak the entire contents of an article or a blog post.

$('article').speak2me('speak')

Or how about only the primary headers and paragraphs

$('h1,h2,p').speak2me('speak')
Internally, Speak2Me clones the matched set of elements and all their descendant elements and text nodes. It then parses this clone using a default set of rules, deciding what should be spoken and ignored, then adding the appropriate pauses to make everything sound more like a narrative.

Examples

Do not speak the content of <h5>, <h6>, and <em> tags.

$().speak2me('ignore','h5','h6','em')

Speak the content of <button> and <code> tags.

$().speak2me('recognize','button','code')

When i.e. is encountered, say That is.

$().speak2me('replace','i.e.','That is')

Change default intro text spoken when an HTML tga <img> is encountered.

$().speak2me('customize','img','Embedded')

Change default intro and outro text spoken when an HTML tag <ol> is encountered.

$().speak2me('customize','ol','Start of numbered List.','End of Numbered List')

Base Functions

Method Description

$(selector).speak2me('speak')

Speaks aloud the specified DOM element(s) and their descendants.

$().speak2me('pause')

Pauses the speaking.

$().speak2me('resume')

Resumes the speaking after it has been paused.

$().speak2me('stop')

Stops the speaking permanently.

Voice Parameters

Method Description Default|Range

$().speak2me('rate', number)

Sets the rate of the speaking voice.

Default: 1.1
Range: [0.1 - 10.0]

$().speak2me('pitch', number)

Sets the pitch of the speaking voice.

Default: 1.0
Range: [0.0 - 2.0]

$().speak2me('volume', number)

Sets the volume of the speaking voice.

Default: 1.0
Range: [0.0 - 1.0]
Omitting number resets the parameter to its default value; changes take effect only when next speak call is made

Read-Only Attributes

Method Description

$().speak2me('enabled')

Returns true|false specifying whether the browser supports the Web Speech API.

$().speak2me('isSpeaking')

Returns true|false specifying whether speaking has not yet been completed or stopped.

$().speak2me('isPaused')

Returns true|false specifying whether speaking is paused.
$().speak2me('isSpeaking') returns the value of true even when paused

Get and Set Voices

Language codes consist of two-characters that specify the language, followed by a hyphen, followed by additional characters that specify the particular country or regional dialect of that language. For example, the codes en-US'' and en-GB'' are both English language, but each represent a different country.
Method Description

$().speak2me('getVoices')

Returns an array of voice objects; each object has two properties: name and language

$().speak2me('getVoices',selector,text)

Populates the DOM element(s) selector with a dropdown menu for voice selection; optional text overwrites default dropdown menu instruction

$().speak2me('setVoice','name',voice)

Sets the voice. Must exactly match one of the names returned when using getVoices.

$().speak2me('setVoice','language',twoDigit)

Sets the voice by finding the first voice that matches the two digit language code (case-insensitive).

$().speak2me('setVoice','language',code)

Sets the voice by finding the first voice that exactly matches the complete language code
Setting a Voice

Setting a voice by specifying only a two-digit language code is useful for when you have text on the page in another language, but don’t want to bother checking to see if that language is available. For example, a page otherwise in English may have a paragraph in German that you want spoken. That paragraph can have a link like this:

$('p').speak2me('setVoice','language','de').speak2me('speak')

If the German language is available, it will be appropriately spoken. If not, the current voice will remain.

Text Manipulation

Method Description

$().speak2me('ignore',tagName,tagName,…​)

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.
See Reference Information below

$().speak2me('recognize',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.
See Reference Information below

$().speak2me('replace',oldText,newText,…​)

Replaces oldText with newText when speaking. This is case-insensitive Multiple pairs of text can be specified. Omitting parameters deletes previous replace commands

$().speak2me('customize',tagName,prepend)

Replaces default text spoken prior to the description of the HTML tags <img>, <table>, and <figure>. Omitting parameters reverts values to its defaults.
See Reference Information below

$().speak2me('customize',tagName,prepend,append)

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.
See Reference Information below

HTML Data Attributes

Data Attribute Description

data-speak2me-ignore

Content from that DOM element and its descendents are ignored.

data-speak2me-recognize

Content from that DOM element is spoken, overriding the default.

data-speak2me-spell

Content from that DOM element is spelled out.

data-speak2me-prepend=text

Specified text is spoken prior to the content of its DOM element.

data-speak2me-append=text

Specified text is spoken after to the content of its DOM element.

data-speak2me-swap=text

Specified text is spoken in place of the content of its DOM element.

Reference Information

Chaining calls is acceptable. For example, the following works just fine.

$('article').speak2me('rate',1.3).speak2me('speak');
Ignored Tags: audio, button, canvas, code, del, dialog, dl, embed, form, head, iframe, meter, nav, noscript, object, s, script, select, style, textarea, video
HTML Tag Default Prepend Text Default Append Text

<img>

There’s an embedded image with the description,

n/a

<table>

There’s an embedded table with the caption,

n/a

<figure>

There’s an embedded figure with the caption,

n/a

<q> and “ ”

Quote,

, Unquote,

<ol>

Start of list.

End of list.

<ul>

Start of list.

End of list.

<blockquote>

Blockquote start.

Blockquote end.
A comma , followed by a space results in a pause when spoken. A period . results in a slightly longer pause.