CODEWITHSUNDEEP
botframework
Bill Software Engineer
Bill Software Engineer

Reputation: 7822

How to use Azure Speech Service in Bot Framework Web Chat

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://learn.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?

Upvotes: 2

Views: 1153

Answers (1)

Nicolas R
Nicolas R

Reputation: 14619

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

Upvotes: 2

Related Questions