Skip to content

Commit d988811

Browse files
author
Trevor Bye
committed
Merge branch 'glharper/js-speech-samples' of https://github.com/glharper/azure-docs-pr 
2 parents 2b255a9 + 4b89d34 commit d988811

File tree

30 files changed

+2026
-6
lines changed

30 files changed

+2026
-6
lines changed

‎articles/cognitive-services/Speech-Service/includes/quickstarts/intent-recognition/javascript/browser.md

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
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+
## Start with some boilerplate code
10+
11+
Let's add some code that works as a skeleton for our project.
12+
13+
```html
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title>
18+
<meta charset="utf-8" />
19+
</head>
20+
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;">
21+
</body>
22+
</html>
23+
```
24+
## Add UI Elements
25+
26+
Now we'll add some basic UI for input boxes, reference the Speech SDK's JavaScript, and grab an authorization token if available.
27+
28+
```html
29+
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;">
30+
<div id="content" style="display:none">
31+
<table width="100%">
32+
<tr>
33+
<td></td>
34+
<td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK JavaScript Quickstart</h1></td>
35+
</tr>
36+
<tr>
37+
<td align="right"><a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Subscription</a>:</td>
38+
<td><input id="subscriptionKey" type="text" size="40" value="subscription"></td>
39+
</tr>
40+
<tr>
41+
<td align="right">Region</td>
42+
<td><input id="serviceRegion" type="text" size="40" value="YourServiceRegion"></td>
43+
</tr>
44+
<tr>
45+
<td align="right">Application ID:</td>
46+
<td><input id="appId" type="text" size="60" value="YOUR_LANGUAGE_UNDERSTANDING_APP_ID"></td>
47+
</tr>
48+
<tr>
49+
<td></td>
50+
<td><button id="startIntentRecognizeAsyncButton">Start Intent Recognition</button></td>
51+
</tr>
52+
<tr>
53+
<td align="right" valign="top">Input Text</td>
54+
<td><textarea id="phraseDiv" style="display: inline-block;width:500px;height:200px"></textarea></td>
55+
</tr>
56+
<tr>
57+
<td align="right" valign="top">Result</td>
58+
<td><textarea id="statusDiv" style="display: inline-block;width:500px;height:100px"></textarea></td>
59+
</tr>
60+
</table>
61+
</div>
62+
63+
<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
64+
65+
<script>
66+
// Note: Replace the URL with a valid endpoint to retrieve
67+
// authorization tokens for your subscription.
68+
var authorizationEndpoint = "token.php";
69+
70+
function RequestAuthorizationToken() {
71+
if (authorizationEndpoint) {
72+
var a = new XMLHttpRequest();
73+
a.open("GET", authorizationEndpoint);
74+
a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
75+
a.send("");
76+
a.onload = function() {
77+
var token = JSON.parse(atob(this.responseText.split(".")[1]));
78+
serviceRegion.value = token.region;
79+
authorizationToken = this.responseText;
80+
subscriptionKey.disabled = true;
81+
subscriptionKey.value = "using authorization token (hit F5 to refresh)";
82+
console.log("Got an authorization token: " + token);
83+
}
84+
}
85+
}
86+
</script>
87+
88+
<script>
89+
// status fields and start button in UI
90+
var phraseDiv;
91+
var statusDiv;
92+
var startIntentRecognizeAsyncButton;
93+
94+
// subscription key, region, and appId for LUIS services.
95+
var subscriptionKey, serviceRegion, appId;
96+
var authorizationToken;
97+
var SpeechSDK;
98+
var recognizer;
99+
100+
document.addEventListener("DOMContentLoaded", function () {
101+
startIntentRecognizeAsyncButton = document.getElementById("startIntentRecognizeAsyncButton");
102+
subscriptionKey = document.getElementById("subscriptionKey");
103+
serviceRegion = document.getElementById("serviceRegion");
104+
appId = document.getElementById("appId");
105+
phraseDiv = document.getElementById("phraseDiv");
106+
statusDiv = document.getElementById("statusDiv");
107+
108+
startIntentRecognizeAsyncButton.addEventListener("click", function () {
109+
startIntentRecognizeAsyncButton.disabled = true;
110+
phraseDiv.innerHTML = "";
111+
statusDiv.innerHTML = "";
112+
});
113+
114+
if (!!window.SpeechSDK) {
115+
SpeechSDK = window.SpeechSDK;
116+
startIntentRecognizeAsyncButton.disabled = false;
117+
118+
document.getElementById('content').style.display = 'block';
119+
document.getElementById('warning').style.display = 'none';
120+
121+
// in case we have a function for getting an authorization token, call it.
122+
if (typeof RequestAuthorizationToken === "function") {
123+
RequestAuthorizationToken();
124+
}
125+
}
126+
});
127+
</script>
128+
```
129+
130+
## Create a Speech configuration
131+
132+
Before you can initialize a `SpeechRecognizer` object, you need to create a configuration that uses your subscription key and subscription region. Insert this code in the `startRecognizeOnceAsyncButton.addEventListener()` method.
133+
134+
> [!NOTE]
135+
> The Speech SDK will default to recognizing using en-us for the language, see [Specify source language for speech to text](../../../../how-to-specify-source-language.md) for information on choosing the source language.
136+
137+
138+
```JavaScript
139+
// if we got an authorization token, use the token. Otherwise use the provided subscription key
140+
var speechConfig;
141+
if (authorizationToken) {
142+
speechConfig = SpeechSDK.SpeechConfig.fromAuthorizationToken(authorizationToken, serviceRegion.value);
143+
} else {
144+
if (subscriptionKey.value === "" || subscriptionKey.value === "subscription") {
145+
alert("Please enter your Microsoft Cognitive Services Speech subscription key!");
146+
return;
147+
}
148+
startIntentRecognizeAsyncButton.disabled = false;
149+
speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey.value, serviceRegion.value);
150+
}
151+
152+
speechConfig.speechRecognitionLanguage = "en-US";
153+
```
154+
155+
## Create an Audio configuration
156+
157+
Now, you need to create an `AudioConfig` object that points to your input devic3. Insert this code in the `startIntentRecognizeAsyncButton.addEventListener()` method, right below your Speech configuration.
158+
159+
```JavaScript
160+
var audioConfig = SpeechSDK.AudioConfig.fromDefaultMicrophoneInput();
161+
```
162+
163+
## Initialize a IntentRecognizer
164+
165+
Now, let's create the `IntentRecognizer` object using the `SpeechConfig` and `AudioConfig` objects created earlier. Insert this code in the `startIntentRecognizeAsyncButton.addEventListener()` method.
166+
167+
```JavaScript
168+
recognizer = new SpeechSDK.IntentRecognizer(speechConfig, audioConfig);
169+
```
170+
171+
## Add a LanguageUnderstandingModel and Intents
172+
173+
You need to associate a `LanguageUnderstandingModel` with the intent recognizer and add the intents you want recognized. We're going to use intents from the prebuilt domain for home automation.
174+
175+
Insert this code below your `IntentRecognizer`. Make sure that you replace `"YourLanguageUnderstandingAppId"` with your LUIS app ID.
176+
177+
```JavaScript
178+
if (appId.value !== "" && appId.value !== "YOUR_LANGUAGE_UNDERSTANDING_APP_ID") {
179+
var lm = SpeechSDK.LanguageUnderstandingModel.fromAppId(appId.value);
180+
181+
recognizer.addAllIntents(lm);
182+
}
183+
```
184+
## Recognize an intent
185+
186+
From the `IntentRecognizer` object, you're going to call the `recognizeOnceAsync()` method. This method lets the Speech service know that you're sending a single phrase for recognition, and that once the phrase is identified to stop recognizing speech.
187+
188+
Insert this code below the model addition:
189+
190+
```JavaScript
191+
recognizer.recognizeOnceAsync(
192+
function (result) {
193+
window.console.log(result);
194+
195+
phraseDiv.innerHTML = result.text + "\r\n";
196+
197+
statusDiv.innerHTML += "(continuation) Reason: " + SpeechSDK.ResultReason[result.reason];
198+
switch (result.reason) {
199+
case SpeechSDK.ResultReason.RecognizedSpeech:
200+
statusDiv.innerHTML += " Text: " + result.text;
201+
break;
202+
case SpeechSDK.ResultReason.RecognizedIntent:
203+
statusDiv.innerHTML += " Text: " + result.text + " IntentId: " + result.intentId;
204+
205+
// The actual JSON returned from Language Understanding is a bit more complex to get to, but it is available for things like
206+
// the entity name and type if part of the intent.
207+
statusDiv.innerHTML += " Intent JSON: " + result.properties.getProperty(SpeechSDK.PropertyId.LanguageUnderstandingServiceResponse_JsonResult);
208+
phraseDiv.innerHTML += result.properties.getProperty(SpeechSDK.PropertyId.LanguageUnderstandingServiceResponse_JsonResult) + "\r\n";
209+
break;
210+
case SpeechSDK.ResultReason.NoMatch:
211+
var noMatchDetail = SpeechSDK.NoMatchDetails.fromResult(result);
212+
statusDiv.innerHTML += " NoMatchReason: " + SpeechSDK.NoMatchReason[noMatchDetail.reason];
213+
break;
214+
case SpeechSDK.ResultReason.Canceled:
215+
var cancelDetails = SpeechSDK.CancellationDetails.fromResult(result);
216+
statusDiv.innerHTML += " CancellationReason: " + SpeechSDK.CancellationReason[cancelDetails.reason];
217+
218+
if (cancelDetails.reason === SpeechSDK.CancellationReason.Error) {
219+
statusDiv.innerHTML += ": " + cancelDetails.errorDetails;
220+
}
221+
break;
222+
}
223+
statusDiv.innerHTML += "\r\n";
224+
startIntentRecognizeAsyncButton.disabled = false;
225+
},
226+
function (err) {
227+
window.console.log(err);
228+
229+
phraseDiv.innerHTML += "ERROR: " + err;
230+
startIntentRecognizeAsyncButton.disabled = false;
231+
});
232+
```
233+
234+
## Check your code
235+
[!code-html [SampleCode](index.html)]
236+
237+
## Create the token source (optional)
238+
239+
In case you want to host the web page on a web server, you can optionally provide a token source for your demo application.
240+
That way, your subscription key will never leave your server while allowing users to use speech capabilities without entering any authorization code themselves.
241+
242+
Create a new file named `token.php`. In this example we assume your web server supports the PHP scripting language. Enter the following code:
243+
244+
```php
245+
<?php
246+
header('Access-Control-Allow-Origin: ' . $_SERVER['SERVER_NAME']);
247+
248+
// Replace with your own subscription key and service region (e.g., "westus").
249+
$subscriptionKey = 'YourSubscriptionKey';
250+
$region = 'YourServiceRegion';
251+
252+
$ch = curl_init();
253+
curl_setopt($ch, CURLOPT_URL, 'https://' . $region . '.api.cognitive.microsoft.com/sts/v1.0/issueToken');
254+
curl_setopt($ch, CURLOPT_POST, 1);
255+
curl_setopt($ch, CURLOPT_POSTFIELDS, '{}');
256+
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Ocp-Apim-Subscription-Key: ' . $subscriptionKey));
257+
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
258+
echo curl_exec($ch);
259+
?>
260+
```
261+
262+
> [!NOTE]
263+
> Authorization tokens only have a limited lifetime.
264+
> 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.
265+
266+
## Build and run the sample locally
267+
268+
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 LUIS key, [LUIS region](../../../../regions.md), and LUIS Application ID. Once those fields have been entered, you can click the appropriate button to trigger a recognition using the microphone.
269+
270+
> [!NOTE]
271+
> This method doesn't work on the Safari browser.
272+
> On Safari, the sample web page needs to be hosted on a web server; Safari doesn't allow websites loaded from a local file to use the microphone.
273+
274+
## Build and run the sample via a web server
275+
276+
To launch your app, open your favorite web browser and point it to the public URL that you host the folder on, enter your [LUIS region](../../../../regions.md) as well as your LUIS Application ID, and trigger a recognition using the microphone. If configured, it will acquire a token from your token source and begin recognizing spoken commands.
277+
278+
## Next steps
279+
280+
[!INCLUDE [footer](footer.md)]

‎articles/cognitive-services/Speech-Service/includes/quickstarts/intent-recognition/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: Recognize intent, 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/intent-recognition/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: Recognize intent, 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.

0 commit comments

Comments
 (0)