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>
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 :(