Text to Speech#

This section describes the configuration and use of the Text to Speech component, which enables you to enhance Dashboards by making them more accessible and engaging.

This component reads aloud any text that is displayed, and can be linked to other components in your Dashboard, significantly enhancing the user experience.

The example below demonstrates how this component can be integrated with a ChartGL component to read the values from data points on the chart.

Set up#

To set up a Text to Speech component:

Click and drag the component into the workspace and configure the Basics including the Speech Options.
Configure any Style, Margin and Format properties.
Click Save to save the configuration.
Click Preview to view the component.

Basics#

The core Basics properties are the same as those for the Text component.

The following additional information applies to Data Sources for this component.

When you specify a Data Source:

The data is formatted based on the values setup using the Template editor in the Template Text property.
Each time the Data Source (or View State) updates, the text is read aloud.
When the Data Source has multiple rows, it displays and reads out the rows one at a time, ensuring the current row is finished speaking before proceeding to the next.

When no Data Source is specified, the component reads values entered in the Formatted Text property.

Speech Options#

In addition to the Text Basics properties the following Speech Options can be configured:

Property	Value	Default
Cache Data	When unchecked, the component reads the data updates from the top, each time the data updates. When checked, only newly added data is read when data updates.	Unchecked
Voice	The voice used to read out the text. This dropdown is populated by the available voices on the user’s device.	None
Rate	The speed at which the text is read out, ranging between 0.1 (lowest) and 10 (highest)	1
Show play/pause button	This controls the display of the play/pause and back and forward buttons. The back and forward buttons are used to skip forward or back through the text a row at a time. When unchecked the play/pause, back and forward buttons are hidden. When checked the buttons are shown.	Unchecked

Browser audio settings

To hear audio, users may need to adjust their browser settings, as browsers typically don't play audio automatically when a page loads.

Text to Speech with Data Source#

The following example shows the first few lines of a conversation being read line by line.

This example uses the static data source, playback conversation shown below.

To replicate this example, copy the code provided below the image into the kdb/q tab of the Data Source.


([]
id:(1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16);
messageType:("sent";"received";"sent";"received";"sent";"received";"sent";"received";"sent";"received";"sent";"received";"sent";"received";"sent";"received");
user:("Alice";"Bob";"Alice";"Bob";"Alice";"Bob";"Alice";"Bob";"Alice";"Bob";"Alice";"Bob";"Alice";"Bob";"Alice";"Bob");
time:(09:00:00 09:00:41 09:01:25 09:02:22 09:02:46 09:03:51 09:05:01 09:06:21 09:06:41 09:12:21 09:14:24 09:16:25 09:20:21 10:01:25 10:05:04  10:10:17 );
text:(
"Hi Bob, do you have a moment to discuss the status of the new marketing campaign?";"Hi Alice, sure thing! I've got some time now. How's everything going with the campaign?";

"Great! I just wanted to touch base on a few key points. We've finalized the content strategy and the design team has completed the initial drafts for the social media posts.";

"That sounds fantastic. Have we set a launch date yet?";

"We're aiming for next Monday, but I wanted to confirm with you if that works. Do you foresee any potential conflicts?";

"Next Monday should be fine. I'll need to check with the sales team to ensure there are no overlapping promotions that could cause confusion. I'll get back to you by the end of the day.";

"Perfect, thanks. Another thing - I think we should schedule a meeting with the analytics team to go over the KPIs for the campaign. When are you available this week?";

"Let's see... I'm free tomorrow afternoon after 2 PM and Thursday morning between 9 and 11 AM. Does any of those times work for you?";

"Tomorrow at 2 PM works for me. I'll send out a meeting invite.";

"Great, thanks Bob. Have a good rest of your day!";

"You too, Alice. Bye!")
)

In the Template Text editor, copy the HTML code below this image into the Advanced Mode tab of the Template Editor

<div class="conversation">
    <div class="conversation-container">
        {{#each this}}
            <div class="message {{messageType}}">
                <span class="user">{{user}}</span>
                {{text}}
                <span class="metadata">
                    <span class="time">{{time}}</span>
                </span>
            </div>
        {{/each}}
    </div>
</div>

Check Show play/pause to display the control buttons.
Select a Voice.
Save the updates.
Preview the Dashboard to play the audio.

Text to Speech with Data Source and View State#

The example at the top of this page shows how this component can be configured to read values from data points on a chart.

In this example, the values of Month and Sales are read aloud when the user hovers over a bar in the chart. The format of the content being read is set as follows, in the Template Text property.

The sales amount for {{month}} is €{{sales}}

Text to speech example

The Text to Speech component reads values from the Data Source, as illustrated below.

Text to speech data source example

Month is configured as a view state for the Hover property in the ChartGL component, and is then referenced in the Template Text of the Text to Speech component. This means that when the user hovers over any bar in the chart, the Month value updates, and both the month and th4e corresponding sales values are read aloud.

Text to speech data view state

Style, Margins, Format#

The Style documentation provides information on common settings.