Skip to content

Commit 3b4061a

Browse files
glharperglharper
committed
Add section for JS quickstart translate speech to speech
1 parent bd7f297 commit 3b4061a

File tree

6 files changed

+336
-2
lines changed

6 files changed

+336
-2
lines changed

‎articles/cognitive-services/Speech-Service/includes/quickstarts/translate-sts/javascript/footer.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: "Quickstart: Synthesize text to audio file, JavaScript - Speech service"
3+
titleSuffix: Azure Cognitive Services
4+
description: TBD
5+
services: cognitive-services
6+
author: erhopf
7+
manager: nitinme
8+
ms.service: cognitive-services
9+
ms.subservice: speech-service
10+
ms.topic: include
11+
ms.date: 10/28/2019
12+
ms.author: erhopf
13+
---
14+
15+
> [!div class="nextstepaction"]
16+
> [Explore JavaScript samples on GitHub](https://aka.ms/speech/github-javascript)

‎articles/cognitive-services/Speech-Service/includes/quickstarts/translate-sts/javascript/header.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: "Quickstart: Translate speech-to-speech, Javascript - Speech service"
3+
titleSuffix: Azure Cognitive Services
4+
description: TBD
5+
services: cognitive-services
6+
author: erhopf
7+
manager: nitinme
8+
ms.service: cognitive-services
9+
ms.subservice: speech-service
10+
ms.topic: include
11+
ms.date: 10/28/2019
12+
ms.author: erhopf
13+
---
14+
15+
If you prefer to jump right in, view or download all <a href="https://aka.ms/speech/github-javascript">Speech SDK JavaScript Samples</a> on GitHub. Otherwise, let's get started.

‎articles/cognitive-services/Speech-Service/includes/quickstarts/translate-sts/javascript/index.html

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
5+
<meta charset="utf-8" />
6+
</head>
7+
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;">
8+
<!-- <uidiv> -->
9+
<div id="warning">
10+
<h1 style="font-weight:500;">Speech Recognition Speech SDK not found (microsoft.cognitiveservices.speech.sdk.bundle.js missing).</h1>
11+
</div>
12+
13+
<div id="content" style="display:none">
14+
<table width="100%">
15+
<tr>
16+
<td></td>
17+
<td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK JavaScript Quickstart</h1></td>
18+
</tr>
19+
<tr>
20+
<td align="right"><a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Subscription</a>:</td>
21+
<td><input id="subscriptionKey" type="text" size="40" value="subscription"></td>
22+
</tr>
23+
<tr>
24+
<td align="right">Region</td>
25+
<td><input id="serviceRegion" type="text" size="40" value="YourServiceRegion"></td>
26+
</tr>
27+
<tr>
28+
<td align="right">Source Language</td>
29+
<td><select id="languageSourceOptions">
30+
<option value="ar-EG">Arabic - EG</option>
31+
<option selected="selected" value="de-DE">German - DE</option>
32+
<option value="en-US">English - US</option>
33+
<option value="es-ES">Spanish - ES</option>
34+
<option value="fi-FI">Finnish - FI</option>
35+
<option value="fr-FR">French - FR</option>
36+
<option value="hi-IN">Hindi - IN</option>
37+
<option value="it-IT">Italian - IT</option>
38+
<option value="ja-JP">Japanese - JP</option>
39+
<option value="ko-KR">Korean - KR</option>
40+
<option value="pl-PL">Polish - PL</option>
41+
<option value="pt-BR">Portuguese - BR</option>
42+
<option value="ru-RU">Russian - RU</option>
43+
<option value="sv-SE">Swedish - SE</option>
44+
<option value="zh-CN">Chinese - CN</option>
45+
</select></td>
46+
</tr>
47+
<tr>
48+
<td align="right">Target Language</td>
49+
<td><select id="languageTargetOptions">
50+
<option value="ar-EG">Arabic - EG</option>
51+
<option selected="selected" value="de-DE">German - DE</option>
52+
<option value="en-US">English - US</option>
53+
<option value="es-ES">Spanish - ES</option>
54+
<option value="fi-FI">Finnish - FI</option>
55+
<option value="fr-FR">French - FR</option>
56+
<option value="hi-IN">Hindi - IN</option>
57+
<option value="it-IT">Italian - IT</option>
58+
<option value="ja-JP">Japanese - JP</option>
59+
<option value="ko-KR">Korean - KR</option>
60+
<option value="pl-PL">Polish - PL</option>
61+
<option value="pt-BR">Portuguese - BR</option>
62+
<option value="ru-RU">Russian - RU</option>
63+
<option value="sv-SE">Swedish - SE</option>
64+
<option value="zh-CN">Chinese - CN</option>
65+
</select></td>
66+
</tr>
67+
<tr>
68+
<td></td>
69+
<td><button id="startRecognizeOnceAsyncButton">Start recognition</button></td>
70+
</tr>
71+
<tr>
72+
<td align="right" valign="top">Results</td>
73+
<td><textarea id="phraseDiv" style="display: inline-block;width:500px;height:200px"></textarea></td>
74+
</tr>
75+
</table>
76+
</div>
77+
<!-- </uidiv> -->
78+
79+
<!-- <speechsdkdiv> -->
80+
<!-- Speech SDK reference sdk. -->
81+
<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
82+
<!-- </speechsdkdiv> -->
83+
84+
<!-- <authorizationfunction> -->
85+
<!-- Speech SDK Authorization token -->
86+
<script>
87+
// Note: Replace the URL with a valid endpoint to retrieve
88+
// authorization tokens for your subscription.
89+
var authorizationEndpoint = "token.php";
90+
91+
function RequestAuthorizationToken() {
92+
if (authorizationEndpoint) {
93+
var a = new XMLHttpRequest();
94+
a.open("GET", authorizationEndpoint);
95+
a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
96+
a.send("");
97+
a.onload = function() {
98+
var token = JSON.parse(atob(this.responseText.split(".")[1]));
99+
serviceRegion.value = token.region;
100+
authorizationToken = this.responseText;
101+
subscriptionKey.disabled = true;
102+
subscriptionKey.value = "using authorization token (hit F5 to refresh)";
103+
console.log("Got an authorization token: " + token);
104+
}
105+
}
106+
}
107+
</script>
108+
<!-- </authorizationfunction> -->
109+
110+
<!-- <quickstartcode> -->
111+
<!-- Speech SDK USAGE -->
112+
<script>
113+
// status fields and start button in UI
114+
var phraseDiv;
115+
var startRecognizeOnceAsyncButton;
116+
117+
// subscription key and region for speech services.
118+
var subscriptionKey, serviceRegion, languageTargetOptions, languageSourceOptions;
119+
var authorizationToken;
120+
var SpeechSDK;
121+
var recognizer;
122+
123+
document.addEventListener("DOMContentLoaded", function () {
124+
startRecognizeOnceAsyncButton = document.getElementById("startRecognizeOnceAsyncButton");
125+
subscriptionKey = document.getElementById("subscriptionKey");
126+
serviceRegion = document.getElementById("serviceRegion");
127+
languageTargetOptions = document.getElementById("languageTargetOptions");
128+
languageSourceOptions = document.getElementById("languageSourceOptions");
129+
phraseDiv = document.getElementById("phraseDiv");
130+
131+
startRecognizeOnceAsyncButton.addEventListener("click", function () {
132+
var soundContext = undefined;
133+
try {
134+
var AudioContext = window.AudioContext || window.webkitAudioContext || false;
135+
if (AudioContext) {
136+
soundContext = new AudioContext();
137+
} else {
138+
alert("AudioContext not supported");
139+
}
140+
} catch (e) {
141+
window.console.log("no sound context found, no audio output. " + e);
142+
}
143+
144+
startRecognizeOnceAsyncButton.disabled = true;
145+
phraseDiv.innerHTML = "";
146+
147+
// if we got an authorization token, use the token. Otherwise use the provided subscription key
148+
var speechConfig;
149+
if (authorizationToken) {
150+
speechConfig = SpeechSDK.SpeechTranslationConfig.fromAuthorizationToken(authorizationToken, serviceRegion.value);
151+
} else {
152+
if (subscriptionKey.value === "" || subscriptionKey.value === "subscription") {
153+
alert("Please enter your Microsoft Cognitive Services Speech subscription key!");
154+
startRecognizeOnceAsyncButton.disabled = false;
155+
return;
156+
}
157+
speechConfig = SpeechSDK.SpeechTranslationConfig.fromSubscription(subscriptionKey.value, serviceRegion.value);
158+
}
159+
160+
speechConfig.speechRecognitionLanguage = languageSourceOptions.value;
161+
var language = languageTargetOptions.value;
162+
speechConfig.addTargetLanguage(language);
163+
164+
speechConfig.setProperty(SpeechSDK.PropertyId.SpeechServiceConnection_TranslationVoice, languageTargetOptions.value);
165+
var audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
166+
recognizer = new SpeechSDK.TranslationRecognizer(speechConfig, audioConfig);
167+
168+
// Signals an audio payload of synthesized speech is ready for playback.
169+
// If the event result contains valid audio, it's reason will be ResultReason.SynthesizingAudio
170+
// Once a complete phrase has been synthesized, the event will be called with ResultReason.SynthesizingAudioComplete and a 0 byte audio payload.
171+
recognizer.synthesizing = function (s, e) {
172+
window.console.log(e);
173+
174+
var audioSize = e.result.audio === undefined ? 0 : e.result.audio.byteLength;
175+
176+
phraseDiv.innerHTML += "(synthesizing) Reason: " + SpeechSDK.ResultReason[e.result.reason] + " " + audioSize + " bytes\r\n";
177+
178+
if (e.result.audio && soundContext) {
179+
var source = soundContext.createBufferSource();
180+
soundContext.decodeAudioData(e.result.audio, function (newBuffer) {
181+
source.buffer = newBuffer;
182+
source.connect(soundContext.destination);
183+
source.start(0);
184+
});
185+
}
186+
};
187+
recognizer.recognizeOnceAsync(
188+
function (result) {
189+
startRecognizeOnceAsyncButton.disabled = false;
190+
var languageKey = language.substring(0,2)
191+
var translation = result.translations.get(languageKey);
192+
window.console.log(translation);
193+
phraseDiv.innerHTML += translation;
194+
195+
recognizer.close();
196+
recognizer = undefined;
197+
},
198+
function (err) {
199+
startRecognizeOnceAsyncButton.disabled = false;
200+
phraseDiv.innerHTML += err;
201+
window.console.log(err);
202+
203+
recognizer.close();
204+
recognizer = undefined;
205+
});
206+
});
207+
208+
if (!!window.SpeechSDK) {
209+
SpeechSDK = window.SpeechSDK;
210+
startRecognizeOnceAsyncButton.disabled = false;
211+
212+
document.getElementById('content').style.display = 'block';
213+
document.getElementById('warning').style.display = 'none';
214+
215+
// in case we have a function for getting an authorization token, call it.
216+
if (typeof RequestAuthorizationToken === "function") {
217+
RequestAuthorizationToken();
218+
}
219+
}
220+
});
221+
</script>
222+
<!-- </quickstartcode> -->
223+
</body>
224+
</html>

‎articles/cognitive-services/Speech-Service/includes/quickstarts/translate-sts/javascript/javascript.md

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
author: IEvangelist
3+
ms.service: cognitive-services
4+
ms.topic: include
5+
ms.date: 04/03/2020
6+
ms.author: dapine
7+
---
8+
9+
## Prerequisites
10+
11+
Before you get started:
12+
13+
> [!div class="checklist"]
14+
> * <a href="https://ms.portal.azure.com/#create/Microsoft.CognitiveServicesSpeechServices" target="_blank">Create an Azure Speech resource <span class="docon docon-navigate-external x-hidden-focus"></span></a>
15+
> * [Setup your development environment and create an empty project](../../../../quickstarts/setup-platform.md)
16+
17+
## Create a new Website folder
18+
19+
Create a new, empty folder. In case you want to host the sample on a web server, make sure that the web server can access the folder.
20+
21+
## Unpack the Speech SDK for JavaScript into that folder
22+
23+
Download the Speech SDK as a [.zip package](https://aka.ms/csspeech/jsbrowserpackage) and unpack it into the newly created folder. This results in two files being unpacked, `microsoft.cognitiveservices.speech.sdk.bundle.js` and `microsoft.cognitiveservices.speech.sdk.bundle.js.map`.
24+
The latter file is optional, and is useful for debugging into the SDK code.
25+
26+
## Create an index.html page
27+
28+
Create a new file in the folder, named `index.html` and open this file with a text editor.
29+
30+
1. Create the following HTML skeleton:
31+
32+
[!code-html [SampleCode](index.html)]
33+
34+
## Create the token source (optional)
35+
36+
In case you want to host the web page on a web server, you can optionally provide a token source for your demo application.
37+
That way, your subscription key will never leave your server while allowing users to use speech capabilities without entering any authorization code themselves.
38+
39+
Create a new file named `token.php`. In this example we assume your web server supports the PHP scripting language. Enter the following code:
40+
41+
```php
42+
<?php
43+
header('Access-Control-Allow-Origin: ' . $_SERVER['SERVER_NAME']);
44+
45+
// Replace with your own subscription key and service region (e.g., "westus").
46+
$subscriptionKey = 'YourSubscriptionKey';
47+
$region = 'YourServiceRegion';
48+
49+
$ch = curl_init();
50+
curl_setopt($ch, CURLOPT_URL, 'https://' . $region . '.api.cognitive.microsoft.com/sts/v1.0/issueToken');
51+
curl_setopt($ch, CURLOPT_POST, 1);
52+
curl_setopt($ch, CURLOPT_POSTFIELDS, '{}');
53+
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Ocp-Apim-Subscription-Key: ' . $subscriptionKey));
54+
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
55+
echo curl_exec($ch);
56+
?>
57+
```
58+
59+
> [!NOTE]
60+
> Authorization tokens only have a limited lifetime.
61+
> This simplified example does not show how to refresh authorization tokens automatically. As a user, you can manually reload the page or hit F5 to refresh.
62+
63+
## Build and run the sample locally
64+
65+
To launch the app, double-click on the index.html file or open index.html with your favorite web browser. It will present a simple GUI allowing you to enter your subscription key and [region](../../../../regions.md) and trigger synthesis of the input text.
66+
67+
## Build and run the sample via a web server
68+
69+
To launch your app, open your favorite web browser and point it to the public URL that you host the folder on, enter your [region](../../../../regions.md), and trigger synthesis of the input text. If configured, it will acquire a token from your token source.
70+
71+
## Next steps
72+
73+
[!INCLUDE [footer](./footer.md)]

‎articles/cognitive-services/Speech-Service/includes/quickstarts/translate-stt-multiple-languages/javascript/header.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: "Quickstart: Translate speech-to-text, Javascript - Speech service"
2+
title: "Quickstart: Translate speech to multiple languages, Javascript - Speech service"
33
titleSuffix: Azure Cognitive Services
44
description: TBD
55
services: cognitive-services

‎articles/cognitive-services/Speech-Service/quickstarts/translate-speech-to-speech.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ms.subservice: speech-service
1010
ms.topic: quickstart
1111
ms.date: 02/10/2020
1212
ms.author: trbye
13-
zone_pivot_groups: programming-languages-set-two
13+
zone_pivot_groups: programming-languages-set-sixteen
1414
---
1515

1616
# Quickstart: Translate speech-to-speech
@@ -39,6 +39,12 @@ zone_pivot_groups: programming-languages-set-two
3939
[!INCLUDE [python](../includes/quickstarts/translate-sts/python/python.md)]
4040
::: zone-end
4141

42+
::: zone pivot="programming-language-javascript"
43+
[!INCLUDE [Header](../includes/quickstarts/translate-sts/header.md)]
44+
[!INCLUDE [Header](../includes/quickstarts/translate-sts/javascript/header.md)]
45+
[!INCLUDE [javascript](../includes/quickstarts/translate-sts/javascript/javascript.md)]
46+
::: zone-end
47+
4248
::: zone pivot="programming-language-more"
4349
[!INCLUDE [Header](../includes/quickstarts/translate-sts/more/header.md)]
4450
[!INCLUDE [more](../includes/quickstarts/translate-sts/more/more.md)]

0 commit comments

Comments
 (0)