Siebel Open UI Enhancement ,Part 1: Text to Speech API

Hello all,

After a long break from writing any useful post i am writing this post after one of my application user demanded a feature to readout Siebel Fields, so i thought to give it a try and achieved it as below.

The concept is very simple we need to call a 3rd party plugin or API and pass field value to it, that we want system to speak. There are various API's available to achieve it to name a few

• https://responsivevoice.org/ 
• http://www.jqueryscript.net/other/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js.html
• http://www.masswerk.at/mespeak/
• http://www.jtalkplugin.com/

I used method from https://responsivevoice.org/, the API is free to use and supports many options.

Base function is responsiveVoice.speak("Text to Speak"), here speak() take in input the text to speak. Additional parameters that can be passes are,

• Changes default voice to "UK English Male", responsiveVoice.speak("hello world", "UK English Male");
• Sets Pitch of voice, responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
• Sets volume of vocie, responsiveVoice.speak("hello world", "UK English Male", {volume: 1});

for further documentation please refer, https://responsivevoice.org/api/

Tasks to do to make it work in Siebel,

1. Download responsivevoice.js from http://code.responsivevoice.org/responsivevoice.js or Include the script directly in your code , <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
2. Add the file under Manifest Files if downloaded else directly refer this is PR file
3. Write a PR file with this JS file under define section , define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] 
4. Associate PR file with a Applet 
5. In PR file write code to get value of certain field and call speak() method on some event say Button click.

Sample PR File

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg


Explanation of Code :

1. Define and Include 3rd party files

define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] ,

all the JS files that code refer need to be defined here. Since we are using speak() method that is defined in file responsivevoice.js so we need to include this. Also either we can directly call file by refering its web location ["siebel/phyrenderer","//code.responsivevoice.org/responsivevoice.js"] or by locally saving file under siebel/custom folder.

2. Creation of button that will call method speak

 var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-ActivateMember-btn';

//Custom Button that will trigger speech API

var Speak = "<button " +
"id= '" + id1 + "' " +
"class= 'siebui-ctrl-btn appletButton' " +
"aria-label=Speak " +
"type=\"button\" " +
"data-display=\"Speak\" " +
"title=Speak " + ">" + "Speak" + "</button>";

$("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".AppletMenu").append(Speak);


3. Function that gets value of a selected field and calls speak method 

$('button[data-display="Speak"]').click(function(){

var controls = pm.Get( "GetControls" );
                         var cntrl = controls[ "Abstract" ];
var Status = pm.ExecuteMethod( "GetFieldValue", cntrl );
//alert(Status);
responsiveVoice.speak( Status );
});

Working Demonstration of this is shown in below video.

any suggestions are always welcome...

In my next post i will be sharing Speech to Text conversion functionality in Siebel..

<<<<<<<<Next in the Series >>>>>>>>>