How do I switch the language and voice for the output in Azure's text-to-voice feature?

Looking for some JavaScript assistance with changing language and voice settings in my code. I have tried searching online but haven't found a solution that fits my skill level.

If anyone could provide help with modifying the code, it would be greatly appreciated. Thank you!

<!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);  
            
        // Looking for guidance on how to modify the code to change language and voice:
        // speechConfig = SpeechSDK.SpeechConfig.setSpeechSynthesisLanguage(voiceLanguage);
        // speechConfig = SpeechSDK.SpeechConfig.setSpeechSynthesisVoiceName(voiceName);
            
        synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);

        // Expecting output 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>

Answer №1

To quickly test, you can define your language and voice in the speechConfig section like this:

<!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>
  
  <!-- Reference to Speech SDK sdk. -->
  <script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
 
  <script>
    function synthesizeSpeech() {
        
        var speechConfig = SpeechSDK.SpeechConfig.fromSubscription("<your subscription key, available on Azure portal under Keys 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 = "I want to set it in German language, but I don't know how!";
                
        synthesizer.speakTextAsync(
          inputText,
          function (result) {
            startSpeakTextAsyncButton.disabled = false;
            window.console.log(result);
            synthesizer.close();
            synthesizer = undefined;
        });
    }
  
  </script>
</body>
</html>

You can view all available voice names on this page starting from Line 130. Unfortunately, there doesn't seem to be an official JavaScript sample for this feature yet.

Answer №2

If you need to convert text to speech and save it as an mp3 file, this function is here for you!

const textToSpeechConversion = async (key, region, text, filename)=> {
    // converting a callback function into a promise
    return new Promise((resolve, reject) => {

        const configForSpeech = sdk.SpeechConfig.fromSubscription(key, region);
        configForSpeech.speechSynthesisOutputFormat = 5; // mp3
   
        configForSpeech.speechSynthesisVoiceName = "es-MX-LibertoNeural";
        configForSpeech.speechSynthesisLanguage = "es-ES";

        let audioConfiguration = sdk.AudioConfig.fromAudioFileOutput(filename);

        const synth = new sdk.SpeechSynthesizer(configForSpeech, audioConfiguration);

        synth.speakTextAsync(
            text,
            result => {
                const { audioData } = result;

                synth.close();

                // returning stream from the file
                const audioFile = fs.createReadStream(filename);
                resolve(audioFile);                
            },
            error => {
                console.log(error);
                synth.close();
                reject(error);
            });
    });
};

module.exports = {
    textToSpeechConversion
};

// example usage - saving the generated audio in oof3.mp3 file
(async () => {
    await textToSpeechConversion('yourkeygoeshere', 'youregiongoeshere', 'El gato y el perro', 'oof3.mp3');
})();

Note:

configForSpeech.speechSynthesisVoiceName = "es-MX-LibertoNeural";

is sufficient to generate Spanish output. Including

configForSpeech.speechSynthesisLanguage = "es-ES";

does not alter the output.

With only setting

configForSpeech.speechSynthesisLanguage = "es-ES";

the output is in Spanish, but with a different voice (probably default).

Voice options can be found here: https://github.com/Azure-Samples/cognitive-services-speech-sdk/blob/master/samples/js/browser/index.html#L130

For more voices, run these commands:

curl --location --request GET 'https://YOUR_RESOURCE_REGION.tts.speech.microsoft.com/cognitiveservices/voices/list' \
--header 'Ocp-Apim-Subscription-Key: YOUR_RESOURCE_KEY' > voices.txt
vim voices.txt

(source: https://learn.microsoft.com/en-us/azure/cognitive-services/speech-service/rest-text-to-speech?tabs=streaming#get-a-list-of-voices)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Javascript to create a function that organizes numbers in ascending order

Is there a way to modify this code so that the flip clock digits appear in ascending order rather than randomly? $( '.count' ).flip( Math.floor( Math.random() * 10 ) ); setInterval(function(){ $( '.count' ).flip( Math.floor( Math.rand ...

Using TypeScript, the fetch function cannot be assigned

Why am I encountering this TS warning? Type 'unknown' is not assignable to type 'PokemonList'.ts(2322) This issue is on line: "return e" Here is the code snippet: export interface PokemonList { count: number; next: stri ...

PHP code for printing a JavaScript string containing a single quote

I'm encountering an issue with a script generated by PHP. When there is a single quote in the description, it throws a JavaScript error and considers the string terminated prematurely. print "<script type=\"text/javascript\">\n ...

What techniques can be used to optimize the SEO of HTML generated by JavaScript? How does React.js go about achieving this

Is my webpage optimized for SEO if it was created using appendChild and innerHTML with JavaScript? Can react.js improve the SEO of a webpage? ...

JQuery not functioning properly within a dynamically loaded AJAX section

After loading some pages with Ajaxtabs, I encountered an issue where jQuery and Owl Carousel were not functioning properly. The classes and styles from Owl Carousel were not being applied to the divs after loading parts of the page. Here is an example of ...

Does React have an event component that detects when a user is actively viewing a specific component, such as a post?

Is there a special React event that fires when the user's gaze is focused on a component? Something like ComponentEnteredShowArea? For instance, videos in Facebook posts play automatically when I direct my attention towards them. It would be ideal i ...

Craft a Flawlessly Repeating Sound Experience - Online

I'm facing a challenge in creating a flawless loop of an audio file. However, all the methods I've tried so far have resulted in a noticeable gap between the end and the start. Here are the approaches I experimented with: The first approach inv ...

Objects may unexpectedly be sorted when using JavaScript or Node.js

When I execute the following code using node app.js 'use strict'; var data = {"456":"First","789":"Second","123":"Third"}; console.log(data); I am receiving the following output: { '123': 'Third', '456': 'F ...

(angular 8) Error occurred when converting a file or image to FormData due to an invalid value (Note: FormData object printed as Object Form{})

I encountered an issue where I am getting an invalid value from form data. The value appears correct in `this.fileData` with a size of 5701, but becomes empty when converted to form data - `{}` is logged when I console.log the form data. Additionally, acce ...

Extract the text and value from an asp.net treeview by utilizing jQuery or JavaScript

On my website, I am using a TreeView controller. I have disabled node selection by setting SelectAction = TreeNodeSelectAction.None as I have the checkbox option enabled. However, this causes an error when trying to access the .href property of the node. T ...

Displaying the preselected option in a Select dropdown menu using Angular

Here is the code snippet I have: <select label="people" id="ppl" [(ngModel)]="Selectedppl" (ngModelChange)="onPplSelection($event.target.value)"> <option>select people</option> <option *ngFor="let x of peopleList" [ngValue]="x"> ...

Adding JSON to the data attribute within a set of DOM elements

I am in the process of developing a website dedicated to recipes, where I am using a Mustache.js template to load recipe information from a JSON file. The structure of my JSON file is as follows: { "recipes":[ {"name": "A", preparationTime: "40min", "serv ...

Is it possible to deactivate an element based on a specific string present in the URL?

<div class="custom-class1"> <div class="custom-class2" id="custom-id1">hello 1</div> <div class="custom-class3" id="custom-id2">hello 2</div> <div class="custom-class4" id="custom-id3">hello 3&l ...

Processing JSON in PHP after an AJAX POST request

In the scenario where JavaScript is used to make an ajax request: index.js- var dataFeedback = $("#feedback_popup_message_body").val(); var jsonObj = JSON.stringify({dataFeedback: dataFeedback}); $.ajax({ url: "index.php", type: 'POST' ...

Define default array values in Mongoose schemas using Node.js

My model definition includes: appFeatures: [{ name: String, param : [{ name : String, value : String }] }] I am looking to assign a default value to appFeatures, such as: name: 'feature', para ...

`Changing the output of a jQuery .load function`

I've created a webpage that pulls content from an article, but I'm looking to display only the first 100 words of the article. Currently, my page successfully loads the article using this code: $(function(){ $('#startOfArticle').l ...

"Combining multiple attributes to target elements while excluding specific classes

My dilemma lies in the following selector that identifies all necessary elements along with an extra element containing the "formValue" class which I aim to omit $("[data-OriginalValue][data-OriginalValue!=''][data-TaskItemID]") ...

Best method for reusing a component in React?

Here is a simplified code featuring a reusable button component: import React from 'react' import styles from './Button.module.scss' const Button = (props) => { return ( <button type={props.type} className={styles.btn} onC ...

An issue has occurred in the node-telegram-bot-api module: Unable to locate 'fs', 'net', 'tls' in node-telegram-bot-api

<pre> import React, { Component } from "react"; import { render } from "react-dom"; import Home from "./components/Home.jsx"; const TelegramBot = require('node-telegram-bot-api'); const token = "MY_TOKEN"; const bot = new TelegramBot(token ...

Having trouble finding the element within the form tag even after attempting to use .switchTo().defaultContent()

My HTML is structured like this: <section> <div> <form> <div>Username field</div> <div>Password field</div> <div> <div>.. <div>.. <iframe& ...