我正在使用带有 JSF 的 Java Web 开发应用程序，并希望使用 JavaScript 集成语音 API。
我所做的是在我的应用程序中插入“speech.1.0.0.js”文件并使用“index.html”进行测试（通知密钥和 SubscriptionId），但没有任何反应。我忘了做什么？
这是页面的源代码：
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/webraf/javax.faces.resource/theme.css.jsf?ln=primefaces-start" /><link type="text/css" rel="stylesheet" href="/webraf/javax.faces.resource/estilo.css.jsf?ln=css" /><link type="text/css" rel="stylesheet" href="/webraf/javax.faces.resource/primefaces.css.jsf?ln=primefaces&v=5.3" /><script type="text/javascript" src="/webraf/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=5.3"></script><script type="text/javascript" src="/webraf/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&v=5.3"></script><script type="text/javascript" src="/webraf/javax.faces.resource/primefaces.js.jsf?ln=primefaces&v=5.3"></script><script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.projectStage='Development';}</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web RAF - LABI</title>
<style type="text/css">
<!--
#logotipo {
text-align: center;
}
-->
</style></head><body>
<div id="container">
<div id="logotipo">
<!-- <h:graphicImage library="imagens" name="logotipo_g.png" /> -->
</div>
<div id="barra_menu">
<!-- Menu -->
<form id="j_idt12" name="j_idt12" method="post" action="/webraf/restrito/laudo_teste.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt12" value="j_idt12" />
<div id="menu"><span id="j_idt12:messages"></span><script id="j_idt12:messages_s" type="text/javascript">$(function(){PrimeFaces.cw('Growl','widget_j_idt12_messages',{id:'j_idt12:messages',sticky:false,life:6000,escape:true,msgs:[]});});</script><div id="j_idt12:j_idt14" class="ui-menu ui-menubar ui-widget ui-widget-content ui-corner-all ui-helper-clearfix" role="menubar"><div tabindex="0" class="ui-helper-hidden-accessible"></div><ul class="ui-menu-list ui-helper-reset"><li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" role="menuitem" aria-haspopup="true"><a href="#" class="ui-menuitem-link ui-submenu-link ui-corner-all" tabindex="-1"><span class="ui-menuitem-text">LAUDO MÉDICO</span><span class="ui-icon ui-icon-triangle-1-s"></span></a><ul class="ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow" role="menu"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/webraf/restrito/laudo.jsf"><span class="ui-menuitem-text">Gerar</span></a></li><li class="ui-separator ui-state-default"></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/webraf/restrito/laudo_editar.jsf"><span class="ui-menuitem-text">Editar</span></a></li><li class="ui-separator ui-state-default"></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/webraf/restrito/laudo_teste.jsf"><span class="ui-menuitem-text">Gerar Laudo (Teste)</span></a></li><li class="ui-separator ui-state-default"></li></ul></li><li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" role="menuitem" aria-haspopup="true"><a href="#" class="ui-menuitem-link ui-submenu-link ui-corner-all" tabindex="-1"><span class="ui-menuitem-text">CADASTRAR</span><span class="ui-icon ui-icon-triangle-1-s"></span></a><ul class="ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow" role="menu"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/webraf/restrito/profissional.jsf"><span class="ui-menuitem-text">Profissional</span></a></li><li class="ui-separator ui-state-default"></li><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/webraf/restrito/paciente.jsf"><span class="ui-menuitem-text">Paciente</span></a></li></ul></li><li class="ui-widget ui-menuitem ui-corner-all ui-menu-parent" role="menuitem" aria-haspopup="true"><a href="#" class="ui-menuitem-link ui-submenu-link ui-corner-all" tabindex="-1"><span class="ui-menuitem-text">CONFIGURAR</span><span class="ui-icon ui-icon-triangle-1-s"></span></a><ul class="ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow" role="menu"><li class="ui-menuitem ui-widget ui-corner-all" role="menuitem"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="#"><span class="ui-menuitem-text">SRAF</span></a></li></ul></li><li class="ui-menuitem ui-menubar-options ui-widget ui-corner-all" role="menuitem">
<!-- <p:inputText style="margin-right:10px" placeholder="Search"/> -->
<!-- Administrador -->
<script type="text/javascript" src="/webraf/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script>
<a href="#" title="Administrativo" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt29':'j_idt12:j_idt29'},'');return false"><img src="/webraf/javax.faces.resource/administrativo.png.jsf?ln=imagens" /></a>
<!-- Principal --><a href="#" title="Principal" onclick="mojarra.jsfcljs(document.getElementById('j_idt12'),{'j_idt12:j_idt32':'j_idt12:j_idt32'},'');return false"><img src="/webraf/javax.faces.resource/principal.png.jsf?ln=imagens" /></a>
<!-- Sair -->
<a onclick="document.location='/webraf/j_spring_security_logout'" title="Sair"><img src="/webraf/javax.faces.resource/logout.png.jsf?ln=imagens" />
</a></li></ul></div><script id="j_idt12:j_idt14_s" type="text/javascript">PrimeFaces.cw("Menubar","widget_j_idt12_j_idt14",{id:"j_idt12:j_idt14",autoDisplay:true});</script>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3017596759583924659:90283694441848566" autocomplete="off" />
</form>
</div>
<div id="corpo"><head><link type="text/css" rel="stylesheet" href="/webraf/javax.faces.resource/theme.css.jsf?ln=primefaces-start" /><script type="text/javascript">if(window.PrimeFaces){PrimeFaces.settings.projectStage='Development';}</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/resources/js/speech.1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
var client;
var request;
function useMic() {
return document.getElementById("useMic").checked;
}
function getMode() {
switch (document.getElementById("mode").value) {
case "longDictation":
return Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionMode.longDictation;
default:
return Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionMode.shortPhrase;
}
}
function getOxfordKey() {
return document.getElementById("oxfordkey").value;
}
function getLanguage() {
return "en-us";
}
function clearText() {
document.getElementById("output").value = "";
}
function setText(text) {
document.getElementById("output").value += text;
}
function getLuisConfig() {
var appid = document.getElementById("luis_appid").value;
var subid = document.getElementById("luis_subid").value;
if (appid.length > 0 <![CDATA[&&]]> subid.length > 0) {
return { appid: appid, subid: subid };
}
return null;
}
function start() {
var mode = getMode();
var luisCfg = getLuisConfig();
clearText();
if (useMic()) {
if (luisCfg) {
client = Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionServiceFactory.createMicrophoneClientWithIntent(
getLanguage(),
getOxfordKey(),
getOxfordKey(),
luisCfg.appid,
luisCfg.subid);
} else {
client = Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionServiceFactory.createMicrophoneClient(
mode,
getLanguage(),
getOxfordKey(),
getOxfordKey());
}
client.startMicAndRecognition();
setTimeout(function () {
client.endMicAndRecognition();
}, 5000);
} else {
if (luisCfg) {
client = Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionServiceFactory.createDataClientWithIntent(
getLanguage(),
getOxfordKey(),
getOxfordKey(),
luisCfg.appid,
luisCfg.subid);
} else {
client = Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionServiceFactory.createDataClient(
mode,
getLanguage(),
getOxfordKey(),
getOxfordKey());
}
request = new XMLHttpRequest();
request.open(
'GET',
(mode == Microsoft.ProjectOxford.SpeechRecognition.SpeechRecognitionMode.shortPhrase) ? "whatstheweatherlike.wav" : "batman.wav",
true);
request.responseType = 'arraybuffer';
request.onload = function () {
if (request.status !== 200) {
setText("unable to receive audio file");
} else {
client.sendAudio(request.response, request.response.length);
}
};
request.send();
}
client.onPartialResponseReceived = function (response) {
setText(response);
}
client.onFinalResponseReceived = function (response) {
setText(JSON.stringify(response));
}
client.onIntentReceived = function (response) {
setText(response);
};
}
</script></head>
<div align="right">Bem-vindo, thiago</div>
<table width="100%">
<tr>
<td></td>
<td><h1>Speech.JS</h1>
<h2>Microsoft Cognitive Services</h2></td>
</tr>
<tr>
<td align="right"></td>
<td><input id="useMic" type="checkbox" />Use Microphone</td>
</tr>
<tr>
<td align="right">Mode:</td>
<td><select id="mode">
<option selected="selected">shortPhrase</option>
<option>longDictation</option>
</select></td>
</tr>
<tr>
<td align="right"><A href="https://www.microsoft.com/cognitive-services/en-us/sign-up" target="_blank">Subscription</A>:</td>
<td><input id="oxfordkey" type="text" size="40" /></td>
</tr>
<tr>
<td align="right">LUIS AppId:</td>
<td><input id="luis_appid" type="text" size="40" /></td>
</tr>
<tr>
<td align="right">LUIS SubscriptionId:</td>
<td><input id="luis_subid" type="text" size="40" /></td>
</tr>
<tr>
<td></td>
<td><button onclick="start()">Start</button></td>
</tr>
<tr>
<td></td>
<td><textarea id="output" style="width: 400px; height: 200px"></textarea>
</td>
</tr>
</table>
</div></body>
</html>