Search code examples
javascriptazuretext-to-speechvoice

Azure text-to-voice: how can I change language and voice for output?


I need help for the following JavaScript and hope someone can kindly help me. Text is read out in an English voice.

How can I change language and voice within the following working code? I intensively searched the web but couldn't find a suitable solution due to my poor java skills.

So, unfortunately my programming skills are not good enough, so I need some assistance for a concrete line of code. Thanks.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
  <meta charset="utf-8" />
</head>
<body>
  
  <button id="startSpeakTextAsyncButton">speak</button>
  
  <!-- Speech SDK reference sdk. -->
  <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>

  <!--   Speech SDK Authorization token  -->
  <script>
  var authorizationEndpoint = "token.php";

  function RequestAuthorizationToken() {
    if (authorizationEndpoint) {
      var a = new XMLHttpRequest();
      a.open("GET", authorizationEndpoint);
      a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      a.send("");
      a.onload = function() {
        var token = JSON.parse(atob(this.responseText.split(".")[1]));
        serviceRegion.value = token.region;
        authorizationToken = this.responseText;
        subscriptionKey.disabled = true;
      }
    }
  }
  </script>

  <!-- Speech SDK USAGE -->
  <script>
    var startSpeakTextAsyncButton;
    var serviceRegion = "westeurope"; 
    // for testing:
    // var voiceName = "HeddaRUS";
    // var voiceLanguage ="de-DE";

    var subscriptionKey;
    var authorizationToken;
    var SpeechSDK;
    var synthesizer;    

    document.addEventListener("DOMContentLoaded", function () {
      startSpeakTextAsyncButton = document.getElementById("startSpeakTextAsyncButton");
      subscriptionKey = document.getElementById("subscriptionKey");
      
        startSpeakTextAsyncButton.addEventListener("click", function () {
        startSpeakTextAsyncButton.disabled = true;
        
        speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(authorizationToken, serviceRegion);  
            
        // I don't know how the code should looke like:
        // speechConfig = SpeechSDK.SpeechConfig.setSpeechSynthesisLanguage(voiceLanguage);
        // speechConfig = SpeechSDK.SpeechConfig.setSpeechSynthesisVoiceName(voiceName);
            
        synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

        // output should be in German language:    
        let inputText = "Ich möchte es auf deutsche Sprache setzen, weiß aber nicht wie!";
                
        synthesizer.speakTextAsync(
          inputText,
          function (result) {
            startSpeakTextAsyncButton.disabled = false;
            window.console.log(result);
            synthesizer.close();
            synthesizer = undefined;
          });
      });

      if (!!window.SpeechSDK) {
        SpeechSDK = window.SpeechSDK;
        startSpeakTextAsyncButton.disabled = false;
        if (typeof RequestAuthorizationToken === "function") {RequestAuthorizationToken();}
      }
    });
  
  </script>
</body>
</html>

Solution

  • For a quick test, you can specify your language and voice in speechConfig as below:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
      <meta charset="utf-8" />
    </head>
    <body>
      
      <button id="startSpeakTextAsyncButton" onclick="synthesizeSpeech()">speak</button>
      
      <!-- Speech SDK reference sdk. -->
      <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
     
      <script>
        function synthesizeSpeech() {
            
            var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("<your subscription key,you can find it on azure portal=> Kesy and Endpoints blade>", "<your region>");
            speechConfig.speechSynthesisVoiceName = "Microsoft Server Speech Text to Speech Voice (de-DE, Hedda)";
            speechConfig.speechSynthesisLanguage = "de-DE";
            
            
            var synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
            let inputText = "Ich möchte es auf deutsche Sprache setzen, weiß aber nicht wie!";
                    
            synthesizer.speakTextAsync(
              inputText,
              function (result) {
                startSpeakTextAsyncButton.disabled = false;
                window.console.log(result);
                synthesizer.close();
                synthesizer = undefined;
            });
        }
      
      </script>
    </body>
    </html>
    

    You can find all voice names on this page from Line 130. It is not your fault,seems there is no official js sample for this :(