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="talkify.min.js"></script>

Non-minified version

<script src="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.

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.

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()

*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.

Playlist Events

Player (valid for all players)

Html5Player only

Entry point: talkify.Html5Player().

Talkify hosted only

Entry point: talkify.TtsPlayer(options?).

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

Player Events

FormReader

Demo

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

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();

React to events

TLDR; Example @ http://jsfiddle.net/andreas_hagsten/x6pve0jd/8/

Talkify provides two event models - PubSub and classic callbacks. The newest, and primary, model is the PubSub model. PubSub is a loosly coupled model which enables client applications to hook in to the Talkify pipeline. To subscribe to events you will need to pass a context key (used when unsubscribing) as well as the event type and the event handler function. The event type is a string containing topics. An event is normally divided into 4 topics - context, origin, type and action.

The Context topic

You would use this top level topic if you run multiple instances of Talkify. This allows you to hook into a specific Talkify instance. If you want to listen to all instances or only have one just specify "*". You will find the context ID in the property "correlationId" of your Player instance.

The Origin topic

Where the event originates from. For example "player" or "controlcenter". A common use case is to listen to player events which is done by specifying "player" in this topic section.

The type topic

Type of event. For example "tts" for TTS-based events.

The action topic

This is the topic that describes what action is taken. This can be "play", "loading", "pause" and so forth.

Putting all 4 topics together forms the event type to listen to. You can replace any part with the wildcard "*" which means that you listens to all events of the given topic.

A few examples can be seen below. A full list of events supported is listed Here.

talkify.messageHub.subscribe("[key]", "*", function () {}); //all events
talkify.messageHub.subscribe("[key]", "*.player.tts.play", function () {}); //play events from TtsPlayer
talkify.messageHub.subscribe("[key]", "*.player.tts.*", function () {}) //all events from TtsPlayer
talkify.messageHub.subscribe("[key]", "*.player.*.play", function () {}) //Play events from all player types

PubSub events

License

GPLv3