Giving a cloud business app a voice.

Introduction

Adding speech to an application fires imagination. In the early eighties I did my first attempts in this field, with the famous Commodore 64.

So, 30 years later, let’s try the same with LightSwitch.

This post is just a proof of concept. I’m not focusing on giving speech the right place in a business application. In this post, nothing more than a screen where you can provide text, which the app will read for you with a male or female.

You can try the app here:  http://www.opinionatedapps.com/lightswitchspeakup/htmlclient/

speechThe Ingredients

Obviously, the transformation from text to speech (a WAV file) is executed server side. I use web-api to call into the server and present the text simply in the query string.

The engine for the speech transformation is the .Net Speachsynthesizer (http://msdn.microsoft.com/en-us/library/system.speech.synthesis.speechsynthesizer(v=vs.110).aspx).

Client side, I simply need to call the web-api controller.  In html5 playing a wav file is extremely simple, unfortunately not all browsers (including IE !) does support this. So, for IE I needed to add the bgsound element.

myapp.TestSpeech.SayIt_execute = function (screen) {
    var phrase = screen.TextToSay;
    var url = "../api/Speech/Speak?phrase=" + phrase +"&gender=" + screen.VoiceGender;

    if (navigator.appName == "Microsoft Internet Explorer") {
        $("#sound").attr("src", url);
    }
    else {
        var snd = new Audio(url);
        snd.play();
    }
};
myapp.TestSpeech.Group_postRender = function (element, contentItem) {
    if (navigator.appName == "Microsoft Internet Explorer") {
        var soundElement = $("<bgsound id='sound'>");
        soundElement.appendTo(element);
    }
};
myapp.TestSpeech.created = function (screen) {
    screen.VoiceGender = "Female";
    screen.TextToSay = "Most business applications ...";
};

 

Conclusion

Speechless? What can I say more? It goes without saying.