关于javascript：语音识别在收听后提供未知错误

Speech recognition provide an unknown error after listening

我有一个 templates / index.html 文件。当您单击第一个按钮 btn_query 时，您应该调用 startDictation()，这是一个用于语音识别的 JavaScript 函数。但是有一个问题，它只出现在 StackOverflow 和 Chrome 上，带有 recognition.onresult = function (e) {...}。

？ 1.我没有得到函数开头的弹出window.alert (5 + 6);。

？ 2. StackOverflow 控制台识别出错误并写入：Recognition had an error。但是不知道是哪一个。

它的行为是这样的：它请求使用麦克风的权限，然后顶部的选项卡上出现红灯，最后是错误消息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

[cc lang="javascript"]<!DOCTYPE html>
<html style="margin: auto; display:table;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

var synth = window.speechSynthesis;


function startDictation() {
document.getElementById('transcript').value = '';
document.getElementById('output').value = '';
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang ="en-US";
recognition.start();
recognition.onresult = function (e) {
window.alert(5 + 6);
document.getElementById('loader').hidden = false;
document.getElementById('transcript').value = e.results[0][0].transcript;
recognition.stop();
var data = e.results[0][0].transcript;
$.post("http://localhost:5000/news_urls", {"data": data },
function (response) {
document.getElementById('loader').hidden = true;
data = response;
document.getElementById("output").value = data["urls"];
}).error(function (response) {
document.getElementById('loader').hidden = true;
if (response.status == 400)
text = jQuery.parseJSON(response.responseText)["original_exception"];
else
text ="I'm sorry. I did not get that.";
document.getElementById("output").value = text;
});
};
recognition.onerror = function (e) {
recognition.stop();
console.log("Recognition had an error");
window.alert(10 + 6);
}
}
}

function btnClick() {
\t synth.cancel();
var utterThis = new SpeechSynthesisUtterance(document.getElementById("output").value);
utterThis.voice = synth.getVoices()[0];
utterThis.pitch = 1.0;
utterThis.rate = 0.8;
utterThis.onerror = function(e) { console.log("Something went wrong with utterance."); };
synth.speak(utterThis);
}

<style>
.speech {
border: 0px solid #DDD;
width: 600px;
padding: 0;
margin: 0;
font-family:"Calibri";
}

.speech input {
border: 1;
width: 240px;
display: inline-block;
height: 30px;
}

.speech img {
float: right;
width: 40px;
}
</style>
</head>

<body bgcolor="#e2e2e2">
<h1 style="font-family: Calibri;">Delbot
It understands your voice commands, searches news and knowledge sources, and summarizes and reads out content to you.
<br /><i class="speech"><font color="gray">Only tested on Windows PCs. Not tested on other PCs or mobile devices.</font>

<textarea style="width: 600px;font-family: Calibri;font-size:x-large" name="q" id="transcript"
placeholder="Your query will appear here after you speak." rows="2" readonly="True"></textarea>

<input id="btn_query" type="button" onclick="startDictation()" value="Query"
style="font-family: Calibri;" />
<img src="static/loader.gif" width="100px" align="left" style="float: left" hidden="True" id="loader" />

<h2 class="speech">Results
<textarea style="width: 600px;font-family: Calibri;font-size:x-large" id="output" rows="2" placeholder="Results will appear here."
readonly="True"></textarea>
<input id="btn_speak" type="button" value="Speak" onclick="btnClick()" style="font-family: Calibri;" />

</body>
</html>

[/cc]

enter

尝试在服务器上托管此 HTML 文件并检查您是否会得到适当的结果。

Check this and this. As chrome does not support to allow microphone with a local file path. You can forcefully do it but it is not recommended. With the really dangerous --disable-web-security (strongly not recommended, especially if you use this instance of Chrome for normal browsing as well, which can put your device in danger) and --allow-file-access-from-files (also not recommended).

调试：

我在访问本地文件时遇到了同样的错误。
但是，在托管 index.html 文件并访问 http://localhost:1111 时，它工作得很好。

enter