Talkify

A javascript text to speech (TTS) library. Originally from and used by https://talkify.net.

Give a voice to your website in a matter of minutes. Talkify library provides you with high quality text to speech (TTS) voices in many languages.

To use our backend services (our hosted voices) you will require an api-key. Visit our portal (https://manage.talkify.net) to create your own API-key, Talkify offers 1000 free requests per month.

• Install
• Dependencies
• Usage
• Features
• SSML
• Configuration
• API
  • Playlist
  • Players
  • Form reader
  • Text selection reader
• Events

Installation

$ bower install talkify

or

$ npm install talkify-tts

Dependencies

Font Awesome 5+ (Used in Talkify Control Center)

Usage

Quick demos

• Web Reader http://jsfiddle.net/5atrbjc6/
• Form Reader http://jsfiddle.net/dx53bg6k/2/
• Text selection Reader http://jsfiddle.net/t5dbcL64/
• Enhanced text visibility http://jsfiddle.net/pwbqkzxj/2/

Include the scripts and stylesheets

Minified version

<script src="https://github.com/Hagsten/Talkify/raw/4.0.0/talkify.min.js"></script>

Non-minified version

<script src="https://github.com/Hagsten/Talkify/raw/4.0.0/talkify.js"></script>

Stylesheets

You find our stylesheets under /styles folder. Include the stylesheets that you need (i.e. all under /modern-control-center for our "modern" UI).

Play all, top to bottom

    var player = new talkify.TtsPlayer().enableTextHighlighting();

    var playlist = new talkify.playlist()
        .begin()
        .usingPlayer(player)
        .withTextInteraction()
        .withElements(document.querySelectorAll('p')) //<--Any element you'd like. Leave blank to let Talkify make a good guess
        .build();

    playlist.play();

Play simple text

var player = new talkify.TtsPlayer(); //or new talkify.Html5Player()
player.playText('Hello world');

Features

• High qualiy voices (https://manage.talkify.net/docs#voices)

• Supported languages:

  • English
  • Chinese
  • Swedish
  • German
  • Korean
  • Japanese
  • Spanish
  • French
  • Italian
  • Norweigean
  • Danish
  • Arabic
  • Russian
  • Dutch
  • Polish
  • Turkish
  • Icelandic
  • Portuguese
  • Romanian
  • Welsh
  • Ukranian
  • Slovak
  • Bulgarian
  • Czech
  • Greek
  • Finnish
  • Hebrew
  • Hindi
  • Croatian
  • Hungarian
  • Indonesian
  • Malay
  • Slovenian
  • Tamil
  • Telugu
  • Thai
  • Vietnamese
  • And more!

• Text highligting for easy read along

• Control pitch, pauses between words, volume, speech rate, phonation and much more
• Download as mp3
• Playback of entire website or paragraph/s of your choice
• Fully integrated UI options
• Read web forms aloud
• Listen to selected text
• Enhanced visibility features

SSML

talkify.config.useSsml = true;

When useSSML is active, Talkify will translate the following markup into SSML. This has the potential of creating a smoother voice experience.

HTML tags	SSML
h1 - h3	emphasis strong
b	emphasis strong
strong	emphasis strong
i	emphasis reduced
em	emphasis strong
br	break-strength strong

Declarative settings

These settings are only supported by the TtsPlayer for now.

Talkify supports declarative settings. These settings will override general settings. The following attributes can be added to any element that Talkify is connected to. When these attributes are present, Talkify will use them as playback settings.

data-attribute	Accepted values	Example	Remarks
data-talkify-wordbreakms	[0, 10000]	data-talkify-wordbreakms="100"
data-talkify-pitch	[-5, 5]	data-talkify-pitch="-2"
data-talkify-rate	[-10, 10]	data-talkify-rate="-2"
data-talkify-voice	Any authorized voice	data-talkify-voice="David"
data-talkify-phonation	"soft", "normal" or ""	data-talkify-phonation="soft"
data-talkify-whisper	"true" or "false"	data-talkify-whisper="true"
data-talkify-whisper	"true" or "false"	data-talkify-whisper="true"
data-talkify-read-as-lowercase	"true"	data-talkify-read-as-lowercase="true"	Some voices spell out capital letters, which might be unwanted, this setting will read the content of the element as lower case

Configuration

talkify.config = {
    debug: false, //true to turn on debug print outs
    useSsml: false, //true to turn on automatic HTML to SSML translation. This should give a smoother reading voice (https://en.wikipedia.org/wiki/Speech_Synthesis_Markup_Language)
    maximumTextLength: 5000, //texts exceeding this limit will be splitted into multiple requests
    remoteService: {
        host : 'https://talkify.net',
        apiKey = 'your-api-key',
        active: true //True to use Talkifys language engine and hosted voices. False only works for Html5Player.
    },
    ui:
    {
        audioControls: { //disable to provide your own player or use Talkify headless.
            enabled: true,
            controlcenter: "modern", //["modern", "classic", "local", "native"]
            container: document.body,
            voicepicker: {
                enabled: true, //Applicable on modern and classic control centers
                filter: {
                    byClass: [], //Not applicable for Html5Player,  example: ["Standard", "Premium", "Exclusive", "Neural"]
                    byCulture: [], //example: ["en-EN", "en-AU"]
                    byLanguage: [] //Not applicable for Html5Player, example: ["English", "Spanish"]
                }
            }
        }
    },
    keyboardCommands: { //Ctrl + command
        enabled: false,
        commands: { // Configure your own keys for the supported commands
            playPause: 32,
            next: 39,
            previous: 37
        }
    },
    voiceCommands: {
        enabled: false,
        keyboardActivation: { //Ctrl + command
            enabled: true,
            key: 77
        },
        commands: { // Configure your own phrases for the supported commands
            playPause: ["play", "pause", "stop", "start"],
            next: ["play next", "next"],
            previous: ["play previous", "previous", "back", "go back"]
        }
    },
    formReader: {
        voice: null, //TTS voice name if remote service otherwise Web Speech API voice object
        rate: 0, //See possible values for each tyoe of player down below
        remoteService: true,
        //Below is the default texts for the form.
        requiredText: "This field is required",
        valueText: "You have entered {value} as: {label}.",
        selectedText: "You have selected {label}.",
        notSelectedText: "{label} is not selected."
    },
    autoScroll: {
        offsetpx: 100 //number of pixels offset from window top
    }
}

API

WebReader demo

Talkify lives in its own namespace - talkify. Hence, everything below is scoped to that namespace (i.e. talkify.playlist, etc).

Auto scroll

Talkify provides an opt in auto scroll to the item to be played.

Activate the feature by calling talkify.autoScroll.activate()

| Method | | activate |

Playlist fluent builder

Playlist builder is Talkifys way to instantiate your playlist. It comes with a fluent API.

Entry point: talkify.playlist()

Method	Parameters	Default	Description	Mandatory
begin			Entry point. Call this to start building your playlist	Yes
usingPlayer	TtsPlayer/Html5Player		Specify which player to be used.	Yes
withTextInteraction			Enables you to click on paragraphs (and other text) to play	No
withElements	DOM elements		Specifies with elements to play. If omitted, Talkify will crawl the page and select for you	No
excludeElements	Array of DOM-elements	[]	For example: document.querySelectorAll("button")	No
withTables	Table configuration, array of objects*		Reads tables in a more intuitive way. The relevant header is repeated before each cell	No
withRootSelector	string	'body'	Sets the scope from where Talkify will start to crawl the page for text to play	No
subscribeTo	Json object		Event subscriptions	No
build			Finalizes and creates the playlist instance	Yes

*withTables parameter is an array of objects with the following properties: - table (DOM-query selector or actual DOM-elements) - headerCells (Optional. DOM-query selector or actual DOM-elements. Defaults to "th") - bodyCells (Optional. DOM-query selector or actual DOM-elements. Defaults to "td")

withTables works with any standard HTML-table and other non-standard tabular content (for example bootstrap grid system). For non standard tabular content, please use the optional parameters to tell Talkify which elements are header cells and which are body cells.

Playlist

This is the instance built from the playliste above.

Method	Parameters	Default	Description
getQueue			Returns the playlist queue
play			Begins playback of playlist
pause			Pauses playlist
replayCurrent			Replays the current item in the playlist
insert	DOM element		Inserts new html elements to play. Useful for elements that Talkify were unable to locate. Elements will be inserted in correct order with respect to the page.
isPlaying			True if any item is currently in a playing state
setPlayer	TtsPlayer/Html5Player		Sets the player that the playlist is using
enableTextInteraction			Enables click to play on HTML elements
disableTextInteraction			Disables click to play on HTML elements
dispose			Clean up

Playlist Events

Event
onEnded
onVoiceCommandListeningStarted
onVoiceCommandListeningEnded

Player (valid for all players)

Method	Parameters	Default	Description
enableTextHighlighting			Tells the player to use text highlighting. For Html5Player this only works on localVoice.
disableTextHighlighting			Turns off text highlighting.
subscribeTo	Json object		Event listeners
playText	string		Plays a text
paused			True if paused
isPlaying			True if playing
play			Play
pause			Pause
forceVoice	object		For Talkify hosted voices, this is a JSON object with a name property. The value of name should be the name of a voice from /api/speech/v1/voices. For browser voices, this is the actual voice from window.speechSynthesis.getVoices()
enableEnhancedTextVisibility			Enables enhanced text visibility. Subtitle-bar, with a larger font-size, is added to the bottom of the screen. Demo
disableEnhancedTextVisibility			Disables enhanced text visibility

Html5Player only

Entry point: talkify.Html5Player().

Method	Parameters	Default	Description
forceLanguage	string		Force the usage of a specific language. Use standard cultures like se-SE for Swedish and so on. Talkify will select a voice that matches the culture.
setRate	double	1	[0.0, 2.0] Playback rate.
setVolume	double	1	[0.0 - 1.0 ]
usePitch	double	1	[0.0, 2.0] Adjusts the pitch of the voice.

Talkify hosted only

Entry point: talkify.TtsPlayer(options?).

constructor parameter "options" is optional. Example { controlcenter: { container: document.querySelector('p.selector') , name: 'modern' }}

Method	Parameters	Default	Description
setRate	int	1	Playback rate. A value between -5 and 5
whisper			Sets the player to whispering mode
normalTone			Sets the player to normal mode (opposite of whispering)
usePhonation	string	normal	Supports for two phonations. "soft" and "normal". Empty string translates to "normal". Case sensitive
useWordBreak	int	0	[0-10000] Adds a break between each word. Any value above 0 adds to the voices standard break length.
usePitch	int	0	[-10 - +10] Adjusts the pitch of the voice.
useVolumeBaseline	double	0	[-10 - +10] Adjusts the volume baseline

Player Events

Event
onBeforeItemPlaying
onSentenceComplete
onPause
onPlay
onResume
onItemLoaded
onTextHighligtChanged

FormReader

Demo

Example: talkify.formReader.addForm(document.getElementById("form-id"));

Method	Parameters	Default	Description
addForm	form element	None	Adds TTS functionality to the form.
removeForm	form element	None	Unbinds all TTS functionality from the form

Text selection reader

Demo

This feature allows the user to select/mark text using the mouse and have that text read aloud.

Example:

    talkify.selectionActivator
        .withTextHighlighting()
        .withEnhancedVisibility()
        .activate();

Method	Parameters	Default	Description
activate	-	-	Call this method to actiate the feature
deactivate	-	-	Call this method to deactivate the feature
withTextHighlighting	-	-	Presets text highlighting to activated. Users can turn this off in the control center UI