Java Web 与 Bing 语音集成 API

Question

我正在使用 Java Web 和 JSF 开发一个应用程序，我想使用 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&amp;v=5.3" /><script type="text/javascript" src="/webraf/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&amp;v=5.3"></script><script type="text/javascript" src="/webraf/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&amp;v=5.3"></script><script type="text/javascript" src="/webraf/javax.faces.resource/primefaces.js.jsf?ln=primefaces&amp;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">
            <!-- &lt;h:graphicImage library="imagens" name="logotipo_g.png" /&gt; -->
        </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">
                        <!-- &lt;p:inputText style="margin-right:10px" placeholder="Search"/&gt; -->
                        <!-- Administrador -->
<script type="text/javascript" src="/webraf/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;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>

Answer 1

我通过调整 javascript 中的导入解决了这个问题，因为我使用了 JSF

<h:outputScript target="head" library="js" name="speech.1.0.0.js" />
<h:outputScript target="head" library="js" name="microsoft.js" />

Java Web 与 Bing 语音集成 API

Java Web integrated with Bing Speech API

javascript

speech-recognition

bing-api

microsoft-speech-api