title: How to use Azure Speech Service in Bot Framework Web Chat
body: <p>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:  <a href="https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat-speech?view=azure-bot-service-3.0" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat-speech?view=azure-bot-service-3.0</a></p>
  
  <p>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.  </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div  id="bot"/&gt;
  &lt;script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      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 = "&lt;span &gt;&lt;p align='center' &gt;My Bot&lt;/p&gt;&lt;/span&gt;"
  &lt;/script&gt;
  </code></pre>
  
  <p>It complain that CogntiveService is not found when I navigate to the page.  Where do I get it?</p>