How to use Azure Speech Service in Bot Framework Web Chat

Question

I am using Bot Framework Web Chat and I correctly setup a front-end for the user to chat with my bot. I am trying to enable speech for it, I try following the tutorial here: https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat-speech?view=azure-bot-service-3.0

The problem I have is I try to use Azure Speech Service, I setup my service correctly, and I set the key. But I am not sure where to get the CognitiveServices? The tutorial doesn't specify where to get it.

Here is my code:

<div  id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>

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

    BotChat.App({
        directLine: { secret: '...' },
        user: { id: 'WebChat' },
        bot: { id: '...' },
        resize: 'detect',
        speechOptions: speechOptionsRemote,
        showUploadButton: false
    }, document.getElementById("bot"));
    var header = document.getElementsByClassName("wc-header");
    header[0].innerHTML = "<span ><p align='center' >My Bot</p></span>"
</script>

It complain that CogntiveService is not found when I navigate to the page. Where do I get it?

I am not sure what do you mean. What exactly are you missing here? Could you elaborate please? — Péter Bozsó
The issue is that Bing Speech has been deprecated, and there is not currently a way to use a Cognitive Services Speech key with WebChat. The WebChat team will be releasing an update soon, allowing pony fill with Cognitive Services instead of Bing Speech. — Eric Dahlvang
WebChat now has support for Bing Speech keys as well as Cognitive Services Speech keys: github.com/Microsoft/BotFramework-WebChat/blob/master/samples/… github.com/Microsoft/BotFramework-WebChat/blob/master/samples/… — Eric Dahlvang

Nicolas R Nicolas R · Accepted Answer · 2018-11-09T13:24:00

Your code sample is using v3 of Webchat, which is now deprecated, see here. There is a v4 of BotFramework-WebChat on the GitHub repository, the update has been a few days ago.

So when in your code your are downloading cdn.botframework.com/botframework-webchat/latest/botchat.js, it is the v4: that explains why it can't found CognitiveServices: it has been refactored.

For using Cognitive Services Speech in the v4, have a look to the dedicated sample: https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/speech-cognitive-services-bing-speech

How to use Azure Speech Service in Bot Framework Web Chat

1 Answers