siebel

Welcome back to the second and final part of our speech to text tutorial (complete with awesome fonts). In the first part , we created a custom PR for the Contact Form Applet and put all the Font Awesome files in the right places. Today it's time to tackle the PR code in earnest. Remember we want to achieve the following: Display a microphone button in a text field using a scalable icon by  Font Awesome Allow speech input using the  HTML5 Web Speech API Animate the microphone icon during recording with  CSS animation Write the recognized text to a field according using the Siebel Open UI API (of course) Play back the recorded text using the  HTML5 Speech Synthesis API So let's open our primordial physical renderer and implement the following code inside the ShowUI method: Click to enlarge (yeah I know, it's just a screenshot) Grab the full code here . Let's walk through the code line by line: First, we 'get' the GetControls property to initialize the controls ...

If you have been following the various articles in the Siebel Open UI realm over the past two years you have probably seen a demonstration of speech recognition to provide field values via the device microphone. The example code with this demo boils down to one line like this: $('input[name="' + controlInputName + '"]').attr("x-webkit-speech","x-webkit-speech"); The above code is adding the x-webkit-speech attribute to a text input control so that we can simply click or tap a microphone icon and start speaking. Note that only Google Chrome supported this feature. Supported? Read on... As you also probably know, this humble writer and his fellow authors are working on the Siebel Open UI Developer's Handbook (to be released early 2015). Of course, we aim to provide as many working examples as possible and the speech-to-text demo is something we have on our list. However, while creating the demo code for the book we found to our dismay t...