导航到基于文本/语音的视图

时间:2017-04-20 11:31:34

标签: html speech-recognition webkitspeechrecognition

我目前正在研究实现一项功能,即我的应用程序的用户可以通过输入文本或使用语音导航到网站的不同部分。我的项目使用谷歌的语音识别API使用以下代码,它允许用户输入文本来执行谷歌搜索或使用口语来实现相同的结果。我想知道是否有人可以在正确的方向上给我一些指示,我可以使用此代码在启动时搜索我的应用程序,如果用户说话/键入forum,那么它将导航到localhost中的索引论坛视图{1}}。在此先感谢,代码如下。

使用语音/文字进行Google搜索的代码

<form id="labnol" method="get" target="_blank" action="https://www.google.com/search">
    <div class="speech">
        <input type="text" name="q" id="transcript" placeholder="Speak" />
        <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
    </div>
</form>

语音听写脚本谷歌搜索

<script>
  function startDictation() {

        if (window.hasOwnProperty('webkitSpeechRecognition')) {

            var recognition = new webkitSpeechRecognition();

            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.lang = "en-US";
            recognition.start();

            recognition.onresult = function(e) {
                document.getElementById('transcript').value
                                         = e.results[0][0].transcript;
                recognition.stop();
                document.getElementById('labnol').submit();
            };

            recognition.onerror = function(e) {
                recognition.stop();
            }

       }
  }
</script>

1 个答案:

答案 0 :(得分:0)

通过实施以下解决(似乎很容易,但我有一个大脑放屁)

应用搜索的HTML

<form id="labnol1">
    <div class="speech">
        <input type="text" name="q2" id="transcript2" placeholder="Speak" />
        <img onclick="startDictationApplication()" src="//i.imgur.com/cHidSVu.gif" />
    </div>
</form>

<强>脚本

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Content/sweetalert.min.js"></script>

<script>
    function startDictationApplication() {

        if (window.hasOwnProperty('webkitSpeechRecognition')) {

            var recognition = new webkitSpeechRecognition();

            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.lang = "en-US";
            recognition.start();

            recognition.onresult = function(e) {
                document.getElementById('transcript2').value
                                         = e.results[0][0].transcript;

                recognition.stop();
                if (document.getElementById('transcript2').value == "forum") {
                    swal({
                        type: "success",
                        title: "Loud and Clear!",
                        text: "Taking you to the forum!",
                        timer: 2000,
                        showConfirmButton: false
                    });
                    window.location.href = 'http://localhost:number/relevant view';
                } else {
                    swal({
                        type: "error",
                        title: "No such page!",
                        text: "Please refer to supported voice recogniton pages and try again!",
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            };

            recognition.onerror = function(e) {
                recognition.stop();
            }

        }
    }
</script>