Self Voicing API

Last updated: Sept 02, 2015 by Alan HarnumVersion comment

2 min read

Self Voicing Overview

Provides both a Text-To-Speech engine for vocalizing text and user interface for enabling/disabling (mute/unmute) the speech synthesis.

Note: This is will only work in browsers that support the SpeechSynthesis API

On This Page

See Also

Still need help?

Join the infusion-users mailing list and ask your questions there.

Adding a Self Voicing Component

Option 1: Typically used as a sub-component of a Preferences Editor Loader, particularly the First Discovery Tool Editor.

Adding as a subcomponent:

selfVoicing: {
    type: "gpii.firstDiscovery.selfVoicing",
	container: "{that}.dom.selfVoicing",
    options: {}
}

Option 2: Adding as a stand alone component:

var mySelfVoicing = gpii.firstDiscovery.selfVoicing(container, options);

Grades

The base grades used by the Self Voicing:

Model

Path	Description	Values	Default
`enabled`	The enabled/disabled (unmute/mute) state of the component	true/false (`Boolean`)	false
`utteranceOpts`	The utterance options to use for all utterances, unless overridden in `queueSpeech` call	An object containing any of the following: `text`: text to synthesize, should be avoided `lang`: the language of the synthesized text `voiceURI`: a url pointing at a voice synthesizer `volume`: a value between 0 and 1 `rate`: speech rate, value between 0.1 and 10 `pitch`: speech pitch, value between 0 and 2	{}

Path

Description

Values

Default

enabled

The enabled/disabled (unmute/mute) state of the component

true/false (Boolean)

false

utteranceOpts

The utterance options to use for all utterances, unless overridden in queueSpeech call

An object containing any of the following:

text: text to synthesize, should be avoided
lang: the language of the synthesized text
voiceURI: a url pointing at a voice synthesizer
volume: a value between 0 and 1
rate: speech rate, value between 0.1 and 10
pitch: speech pitch, value between 0 and 2

{}

Methods

Method	Description	Parameters
`queueSpeech`	Makes use of the fluid.textToSpeech.queueSpeech but only calls it if the `enabled` model value is `true`. It also prevents the speech from actually queue, and sets it to always interrupt.	`text`: The string of text to be voiced `options`: Any valid speech utterance options (see: utteranceOpts)
`toggleState`	Toggles the `enabled` state, effectively muting/unmuting.
`setLabel`	Sets the mute button label depending on the `enabled` state. Note: this is meant for internal use by the component and not for external API calls.
`setTooltip`	Sets the tooltip for the mute button depending on the `enabled` state. Note: this is meant for internal use by the component and not for external API calls.
`setMuteStyle`	Sets the style class on the mute button depending on the `enabled` state. Note: this is meant for internal use by the component and not for external API calls.
`clearQueue`	Empties the queue if the self voicing is disabled (muted).
`speakVoiceSate`	Utters the current `enabled` state.	`options`: Any valid speech utterance options (see: utteranceOpts)

Options

Name	Description	Values	Default
`selectors`	Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents.		See Selectors
`styles`	Specific class names used to achieve the look and feel.		styles: { muted: "gpii-fd-selfVoicing-muted", unmuted: "gpii-fd-selfVoicing-unmuted" }
`tooltipContentMap`	The mapping between the selector and tooltip message to be displayed (see: Attach Tooltip API).		tooltipContentMap: { "mute": "mutedTooltip" }
`modelListeners`	JavaScript object containing model paths and the listeners that are activated when changes happen to those paths.	Keys in the object are event names, values are functions or arrays of functions.	See Model

Selectors

One of the options that can be provided to the First Discovery Editor is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

Selector Name	Description	Default
`mute`	The DOM element to use as the mute button	".gpiic-fd-selfVoicing-mute"
`muteLabel`	The DOM element to use as the label for the mute button	".gpiic-fd-selfVoicing-muteLabel"

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/selfVoicing.js"></script>