How to add live speech to text data for microsoft bot framework(exactly what google speech does)

Question

I am new to microsoft bot framework. I already build a simple chatbot, and when I publish it and deloyed it to webapp channel, it looks like this

where user will select or type text and bot will respond. Now what i need is, I need to add a mic near by send option so that if user clicks on the mic and starts speaking then it should be typed automatically by bot(exactly how google speech does)

Im having bing speech to text api ref key but I dont know how to add and activate the mic functionality in it.

If anyone knows please help me to resolve this

Answer 1

You can leverage Embeddable web chat control for the Microsoft Bot Framework plugin in your web application. You can refer to https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/speech/index.html for a speech sample.

And generally speaking for some points in code for quick test:

1. Include style and script files in your web page:

<link href='https://cdn.botframework.com/botframework-webchat/latest/botchat.css' rel="stylesheet"/> ... <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script> <script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>

2. Init speech options:

   const speechOptions = {
     speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: 'YOUR_COGNITIVE_SPEECH_API_KEY' }),
     speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
       gender: CognitiveServices.SynthesisGender.Female,
       subscriptionKey: 'YOUR_COGNITIVE_SPEECH_API_KEY',
       voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US, JessaRUS)'
     })
   };
   

3. Init BotChat in script:

   BotChat.App({
     bot: bot,
     locale: params['locale'],
     resize: 'detect',
     // sendTyping: true,    // defaults to false. set to true to send 'typing' activities to bot (and other users) when user is typing
     speechOptions: speechOptions,
     user: user,
     // locale: 'es-es', // override locale to Spanish
     directLine: {
       domain: params['domain'],
       secret: params['s'],
       token: params['t'],
       webSocket: params['webSocket'] && params['webSocket'] === 'true' // defaults to true
     }
   }, document.getElementById('BotChatGoesHere'));