Share via

Azure Speech Endpoint: Unable to contact server. StatusCode: 1006

Nico Plattner 0 Reputation points
2024-12-03T16:47:26.87+00:00

I am getting the following error trying to use the Speech SDK with Entra authentication.
Error: Unable to contact server. StatusCode: 1006, wss://westeurope.tts.speech.microsoft.com/cognitiveservices/websocket/v1 Reason: undefined

I am using a Cognitive Services Multi account ressource and when I query the translation endpoint everything works fine with my auth token, however it doesn't when trying to use the speech endpoint with the speech sdk.

Here's my minimal version using next.js

dependencies

    "next": "^14.2.15",
    "react": "^18",
    "react-dom": "^18.3.1",
    "@azure/identity": "^4.4.0",
    "@azure/msal-browser": "^3.26.1",
    "@azure/msal-react": "^2.1.1",
    "microsoft-cognitiveservices-speech-sdk": "^1.40.0"

layout.js

'use client'

import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider, MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";
import { InteractionType } from "@azure/msal-browser";

export default function RootLayout({ children }) {

  const msalConfig = {
    auth: {
      clientId: "APPLICATION ID",
      authority: "https://login.microsoftonline.com/<TENANT ID>",
      redirectUri: 'http://localhost:3000',
    },
    cache: {
      cacheLocation: "localStorage",
      storeAuthStateInCookie: false,
    },
  };
  
  const msalInstance = new PublicClientApplication(msalConfig);

  return (
    <html lang="en">
      <body>
        <MsalProvider instance={msalInstance}>
          <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
            {children}
          </MsalAuthenticationTemplate>
        </MsalProvider>
      </body>
    </html>
  );
}

page.js

'use client'

import { useMsal } from "@azure/msal-react"
import * as sdk from "microsoft-cognitiveservices-speech-sdk"
import { useEffect, useState } from "react"


export default function Home() {
  const { instance } = useMsal()
  const [error, setError] = useState(null)

  const region = "westeurope"
  const resourceId = "<RESOURCE ID>"

  const tokenRequest = {
      scopes: ["https://cognitiveservices.azure.com/.default"]
  };

  const fetchToken = async () => {
    try {
        const account = instance.getAllAccounts()[0];

        const response = await instance.acquireTokenSilent({
            ...tokenRequest,
            account,
        })
        return response.accessToken
    } catch (error) {
        if (error) {
            const response = await instance.acquireTokenPopup(tokenRequest)
            return response.accessToken
        }
        throw error
    }
  };

  useEffect(() => {
    fetchToken().then(token => 
    {
      const authToken = "aad#" + resourceId + "#" + token
      const speechConfig = sdk.SpeechConfig.fromAuthorizationToken(authToken, region)

      const synthesizer = new sdk.SpeechSynthesizer(
        speechConfig
      )

      synthesizer.speakTextAsync(
        "Hello, world!",
        function (result) {
          if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {
            console.log("synthesis finished.")
          } else {
            setError(result.errorDetails)
            console.error("Speech synthesis canceled, " + result.errorDetails)
          }})
      synthesizer.close();
    })
  }, [instance])


  return (
    <div>
      Error: {error}
    </div>
  );
}

would be super grateful for any help!

Azure AI Speech
Azure AI Speech
An Azure service that integrates speech processing into apps and services.
1,955 questions

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.