<!DOCTYPE html> |
<html lang="en"> |
<head> |
<title>Microsoft Cognitive Services Speech SDK JavaScript Quickstart</title> |
<meta charset="utf-8" /> |
<style> |
body { |
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; |
font-size: 14px; |
} |
table, th, td { |
border: 1px solid #f1f1f1; |
border-collapse: collapse; |
} |
th, td { |
padding: 10px; |
} |
.mode { |
font-size: 18px; |
} |
input:not(disabled) { |
font-weight: bold; |
color: black; |
} |
button { |
padding: 4px 8px; |
background: #0078d4; |
color: #ffffff; |
} |
button:disabled { |
padding: 4px 8px; |
background: #ccc; |
color: #666; |
} |
input[type=radio] { |
position: relative; |
z-index: 1; |
} |
input[type=radio] + label { |
padding: 8px 4px 8px 30px; |
margin-left: -30px; |
} |
input[type=radio]:checked + label { |
background: #0078d4; |
color: #ffffff; |
} |
</style> |
</head> |
<body style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:13px;"> |
<div id="warning"> |
<h1 style="font-weight:500;">Speech Recognition Speech SDK not found (microsoft.cognitiveservices.speech.sdk.bundle.js missing).</h1> |
</div> |
<div id="content" style="display:none"> |
<table width="100%"> |
<tr> |
<td></td> |
<td><h1 style="font-weight:500;">Microsoft Cognitive Services Speech SDK JavaScript Quickstart</h1></td> |
</tr> |
<tr> |
<td align="right"><a href="https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started" target="_blank">Subscription</a>:</td> |
<td><input id="subscriptionKey" type="text" size="40" placeholder="YourSubscriptionKey"></td> |
</tr> |
<tr> |
<td align="right">Region</td> |
<td><input id="serviceRegion" type="text" size="40" placeholder="YourServiceRegion"></td> |
</tr> |
<tr> |
<td align="right" valign="top">Input Text</td> |
<td><textarea id="phraseDiv" style="display: inline-block;width:500px;height:50px"></textarea></td> |
</tr> |
<tr> |
<td></td> |
<td><button id="startSpeakTextAsyncButton">Start Text to Speech</button></td> |
</tr> |
<tr> |
<td align="right" valign="top">Result</td> |
<td><textarea id="resultDiv" style="display: inline-block;width:500px;height:100px"></textarea></td> |
</tr> |
</table> |
</div> |
<!-- Speech SDK reference sdk. --> |
<script src="https://aka.ms/csspeech/jsbrowserpackageraw"></script> |
<!-- Speech SDK USAGE --> |
<script> |
// status fields and start button in UI |
var phraseDiv; |
var resultDiv; |
var startSpeakTextAsyncButton; |
// subscription key and region for speech services. |
var subscriptionKey, serviceRegion; |
var SpeechSDK; |
var synthesizer; |
document.addEventListener("DOMContentLoaded", function () { |
startSpeakTextAsyncButton = document.getElementById("startSpeakTextAsyncButton"); |
subscriptionKey = document.getElementById("subscriptionKey"); |
serviceRegion = document.getElementById("serviceRegion"); |
phraseDiv = document.getElementById("phraseDiv"); |
resultDiv = document.getElementById("resultDiv"); |
startSpeakTextAsyncButton.addEventListener("click", function () { |
startSpeakTextAsyncButton.disabled = true; |
phraseDiv.innerHTML = ""; |
if (subscriptionKey.value === "" || subscriptionKey.value === "subscription") { |
alert("Please enter your Microsoft Cognitive Services Speech subscription key!"); |
startSpeakTextAsyncButton.disabled = false; |
return; |
} |
var speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey.value, serviceRegion.value); |
synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig); |
let inputText = phraseDiv.value; |
synthesizer.speakTextAsync( |
inputText, |
function (result) { |
startSpeakTextAsyncButton.disabled = false; |
if (result.reason === SpeechSDK.ResultReason.SynthesizingAudioCompleted) { |
resultDiv.innerHTML += "synthesis finished for [" + inputText + "].\n"; |
} else if (result.reason === SpeechSDK.ResultReason.Canceled) { |
resultDiv.innerHTML += "synthesis failed. Error detail: " + result.errorDetails + "\n"; |
} |
window.console.log(result); |
synthesizer.close(); |
synthesizer = undefined; |
}, |
function (err) { |
startSpeakTextAsyncButton.disabled = false; |
resultDiv.innerHTML += "Error: "; |
resultDiv.innerHTML += err; |
resultDiv.innerHTML += "\n"; |
window.console.log(err); |
synthesizer.close(); |
synthesizer = undefined; |
}); |
}); |
if (!!window.SpeechSDK) { |
SpeechSDK = window.SpeechSDK; |
startSpeakTextAsyncButton.disabled = false; |
document.getElementById('content').style.display = 'block'; |
document.getElementById('warning').style.display = 'none'; |
// in case we have a function for getting an authorization token, call it. |
if (typeof RequestAuthorizationToken === "function") { |
RequestAuthorizationToken(); |
} |
} |
}); |
</script> |
</body> |
</html>