Unable to Use Subscription Key in Azure's Speaker Recognition JavaScript Example

ZhiiiiiYang commented 1 year ago

I am using the Speaker Recognition (Javascript) example provided by Azure's official documentation (https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/quickstart/javascript/browser/speaker-recognition/verification).

After successfully creating the Resource and accessing the service inside, I keep getting the error message: ERROR: Unable to contact server. StatusCode: 1006, Reason: undefined.

I selected 'westus' for my region, and my account has already been verified by Microsoft Cognitive Services Speaker Recognition.

My Subscription Key works successfully in the Python example, but I don’t know why it can't be used in Javascript.

glharper commented 1 year ago

@ZhiiiiiYang Thank you for using JS Speech SDK, and writing this issue up. Could you provide us with the code you're using to repro this?

ZhiiiiiYang commented 1 year ago

The code below is identical to the one from the official example I provided above. Thank You!

<!DOCTYPE html>
<html>
<head>
  <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>;
  <title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
  <meta charset="utf-8" />
</head>
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;">
  <div id="warning">
    <h1 style="font-weight:500;">Speech Recognition Speech SDK not found (microsoft.cognitiveservices.speech.sdk.bundle.js missing).</h1>
  </div>

  <div id="content" style="display:none">
    <table width="100%">
      <tr>
        <td></td>
        <td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK JavaScript Quickstart</h1></td>
      </tr>
      <tr>
        <td align="right"><a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Subscription</a>:</td>
        <td><input id="subscriptionKey" type="text" size="40" value=""></td>
      </tr>
      <tr>
        <td align="right">Region</td>
        <td><input id="serviceRegion" type="text" size="40" value="westus"></td>
      </tr>
      <tr>
        <td align="right">Enrollment Files</td>
        <td>
          <input type="file" multiple id="filePicker" accept=".wav" />
        </td>
      </tr>
      <tr>
        <td align="right">Test Identification File</td>
        <td>
          <input type="file" id="testFilePicker" accept=".wav" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td><button id="createVoiceProfileButton">Create Voice Profile</button></td>
      </tr>
      <tr>
        <td></td>
        <td><button id="verifySpeakerButton">Verify Speaker</button></td>
      </tr>
      <tr>
        <td></td>
        <td><button id="listPhrasesButton">List Activation Phrases</button></td>
      </tr>
      <tr>
        <td></td>
        <td><button id="deleteProfileButton">Delete Voice Profile</button></td>
      </tr>
      <tr>
        <td align="right" valign="top">Result</td>
        <td><textarea id="resultDiv" style="display: inline-block;width:500px;height:200px"></textarea></td>
      </tr>
    </table>
  </div>

  <!-- Speech SDK reference sdk. -->
  <script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script>

  <!-- Speech SDK USAGE -->
  <script>

    // status fields and start button in UI
    var resultDiv;
    var createVoiceProfileButton;
    var verifySpeakerButton;
    var deleteProfileButton;
    var listPhrasesButton;

    // subscription key and region for speech services.
    var subscriptionKey, serviceRegion;
    var SpeechSDK;
    var client;
    var filePicker, testFilePicker,audioFiles, testFile;
    var speechConfig, profile;
    var locale = "en-us";

    document.addEventListener("DOMContentLoaded", function () {

      createVoiceProfileButton = document.getElementById("createVoiceProfileButton");
      verifySpeakerButton = document.getElementById("verifySpeakerButton");
      listPhrasesButton = document.getElementById("listPhrasesButton");
      deleteProfileButton = document.getElementById("deleteProfileButton");
      subscriptionKey = document.getElementById("subscriptionKey");
      serviceRegion = document.getElementById("serviceRegion");
      resultDiv = document.getElementById("resultDiv");
      filePicker = document.getElementById("filePicker");
      testFilePicker = document.getElementById("testFilePicker");

      deleteProfileButton.disabled = true;
      listPhrasesButton.disabled = true;
      verifySpeakerButton.disabled = true;
      filePicker.addEventListener("change", function () {
          audioFiles = filePicker.files;
      });

      testFilePicker.addEventListener("change", function () {
          testFile = testFilePicker.files[0];
      });

      createVoiceProfileButton.addEventListener("click", async function () {

        createVoiceProfileButton.disabled = true;
        resultDiv.innerHTML = "";

        if (subscriptionKey.value === "" || subscriptionKey.value === "subscription") {
          alert("Please enter your Microsoft Cognitive Services Speech subscription key!");
          createVoiceProfileButton.disabled = false;
          return;
        }
        speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey.value, serviceRegion.value);

        client = new SpeechSDK.VoiceProfileClient(speechConfig);
        listPhrasesButton.disabled = false;

        try {
          profile = await client.createProfileAsync(SpeechSDK.VoiceProfileType.TextDependentVerification, locale);
          window.console.log(profile);

          resultDiv.innerHTML += "Profile created ProfileId: " + profile.profileId;
          resultDiv.innerHTML += "\r\n"; 
          deleteProfileButton.disabled = false;

          for(var i = 0; i < audioFiles.length; i++){
            let config = SpeechSDK.AudioConfig.fromWavFileInput(audioFiles[i]);
            try {
              let result = await client.enrollProfileAsync(profile, config);
              resultDiv.innerHTML += "(Enrollment result) Reason: " + SpeechSDK.ResultReason[result.reason]; 
              resultDiv.innerHTML += "\n"; 
              window.console.log(result);
            } catch (err) {
              resultDiv.innerHTML += "ERROR: " + err;
            }
          }
          verifySpeakerButton.disabled = false;

          resultDiv.innerHTML += "\r\n"; 

          createVoiceProfileButton.disabled = false;
        } catch (err) {
          window.console.log(err);
          resultDiv.innerHTML += "ERROR: " + err; 

          createVoiceProfileButton.disabled = false;
        }
      });

      verifySpeakerButton.addEventListener("click", async function () {
        let testAudioConfig = SpeechSDK.AudioConfig.fromWavFileInput(testFile);
        let recognizer = new SpeechSDK.SpeakerRecognizer(speechConfig, testAudioConfig);
        let model = SpeechSDK.SpeakerVerificationModel.fromProfile(profile);
        try {
          let result = await recognizer.recognizeOnceAsync(model);
          window.console.log(result);
          let reason = result.reason; 
          resultDiv.innerHTML += "(Verification result) Reason: " + SpeechSDK.ResultReason[reason]; 
          resultDiv.innerHTML += "\n"; 
          if (reason === SpeechSDK.ResultReason.Canceled) {
            let cancellationDetails = SpeechSDK.SpeakerRecognitionCancellationDetails.fromResult(result);
            resultDiv.innerHTML += "(Verification canceled) Error Details: " + cancellationDetails.errorDetails;
            resultDiv.innerHTML += "\n"; 
            resultDiv.innerHTML += "(Verification canceled) Error Code: " + cancellationDetails.errorCode;
            resultDiv.innerHTML += "\n"; 
          } else {
            resultDiv.innerHTML += "(Verification result) Profile Id: " + result.profileId; 
            resultDiv.innerHTML += "\n"; 
            resultDiv.innerHTML += "(Verification result) Score: " + result.score; 
            resultDiv.innerHTML += "\r\n"; 
          }
        } catch (err) {
          window.console.log(err);
          resultDiv.innerHTML += "ERROR: " + err; 
        }
      });

      listPhrasesButton.addEventListener("click", async function () {
        if (client) {
          try {
            let result = await client.getActivationPhrasesAsync(SpeechSDK.VoiceProfileType.TextDependentVerification, locale);
            if (result.phrases.length > 0) {
              for (const phrase of result.phrases) {
                resultDiv.innerHTML += "(Activation Phrases) Received: " + phrase;
                resultDiv.innerHTML += "\r\n";
              }
            }
          } catch (err) {
            window.console.log(err);
            resultDiv.innerHTML += "ERROR: " + err; 
          }
        }
      });

      deleteProfileButton.addEventListener("click", async function () {
        try {
          let result = await client.deleteProfileAsync(profile);
          resultDiv.innerHTML += "(Delete profile result) Reason: " + SpeechSDK.ResultReason[result.reason];
          resultDiv.innerHTML += "\r\n";
          deleteProfileButton.disabled = true;
          verifySpeakerButton.disabled = true;
        } catch (err) {
          window.console.log(err);
          resultDiv.innerHTML += "ERROR: " + err; 
        }
      });

      if (!!window.SpeechSDK) {
        SpeechSDK = window.SpeechSDK;
        createVoiceProfileButton.disabled = false;

        document.getElementById('content').style.display = 'block';
        document.getElementById('warning').style.display = 'none';
      }
    });
  </script>
</body>
</html>

glharper commented 1 year ago

@ZhiiiiiYang The fourth line in the code above starting with "<script src=" is not in the sample. Could you remove it and try again?

Update: using the code above without the fourth line, I've enrolled a voice profile and used it for verification successfully.

ZhiiiiiYang commented 1 year ago

I apologize for any oversight on my part. Even after removing the code, I'm still unable to use the verification function. The same error persists. Interestingly, when I use the key in the Python example, it works perfectly. I wonder if there might be some preliminary settings I missed or if there are other issues. I followed the steps from this website: https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/quickstart/javascript/browser/speaker-recognition/verification.

glharper commented 1 year ago

@ZhiiiiiYang This may be a service issue. Could you send me an email at [email deleted], so I can connect you with the service team?

ZhiiiiiYang commented 1 year ago

OK, I have sent an email to [email deleted], thank you for your help!

glharper commented 1 year ago

OK, I have sent an email to [email deleted], thank you for your help!

Responded and forwarded to service team, let's continue the conversation over e-mail.

jhakulin commented 1 year ago

@glharper did we find resolution on the issue?

ZhiiiiiYang commented 1 year ago

The service team did help me find the main issue of the problem and provided me a solution, but I met a new question. I sent it to the Cognitive Services Gating Support team twice, they just responded to me the same email twice, too. The content of the email is in the appendix, thank you.

Jarno Hakulinen @.***> 於 2023年9月1日週五 09:14 寫道：

@glharper https://github.com/glharper did we find resolution on the issue?

— Reply to this email directly, view it on GitHub https://github.com/Azure-Samples/cognitive-services-speech-sdk/issues/2041#issuecomment-1701976202, or unsubscribe https://github.com/notifications/unsubscribe-auth/A7GTLHP5QBHJ7NVASAX64MTXYEZIHANCNFSM6AAAAAA3JKSBAU . You are receiving this because you were mentioned.Message ID: @.*** .com>

Azure-Samples / cognitive-services-speech-sdk

Unable to Use Subscription Key in Azure's Speaker Recognition JavaScript Example #2041