1、语音识别的过程
语音识别涉及三个过程：首先，需要设备的麦克风接收这段语音；其次，语音识别服务器会根据一系列语法 (基本上，语法是你希望在具体的应用中能够识别出来的词汇) 来检查这段语音；最后，当一个单词或者短语被成功识别后，结果会以文本字符串的形式返回 (结果可以有多个)，以及更多的行为可以设置被触发。
示例代码：
您如果想直接尝试的话可以先复制下面代码运气起来试试效果。
操作方法：将代码运行在浏览器，点击屏幕，允许麦克风权限，然后出说其中一种颜色。
结果1：识别成功，但是没听清楚您说的什么，页面不会有任何变化。
结果2：识别成功，页面背景切换为您说的那种颜色。
结果3：识别失败，失败原因将在页面底部展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title></title>
<style>
body,
html {
margin: 0;
}
html {
height: 100%;
background-color:white;
}
body {
height: inherit;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
}
h1,
p {
font-family: sans-serif;
text-align: center;
padding: 20px;
}
div {
height: 100px;
overflow: auto;
position: absolute;
bottom: 0px;
right: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.2);
}
ul {
margin: 0;
}
.hints span {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body>
<h1>语音识别转换器</h1>
<p class="hints"></p>
<div>
<p class="output"><em>识别进度展示处</em></p>
</div>
</body>
<script>
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var SpeechGrammarList = SpeechGrammarList || window.webkitSpeechGrammarList
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
var colors = [
'aqua',
'azure',
'beige',
'bisque',
'black',
'blue',
'brown',
'chocolate',
'coral',
'crimson',
'cyan',
'fuchsia',
'ghostwhite',
'gold',
'goldenrod',
'gray',
'green',
'indigo',
'ivory',
'khaki',
'lavender',
'lime',
'linen',
'magenta',
'maroon',
'moccasin',
'navy',
'olive',
'orange',
'orchid',
'peru',
'pink',
'plum',
'purple',
'red',
'salmon',
'sienna',
'silver',
'snow',
'tan',
'teal',
'thistle',
'tomato',
'turquoise',
'violet',
'white',
'yellow',
]
var recognition = new SpeechRecognition()
if (SpeechGrammarList) {
var speechRecognitionList = new SpeechGrammarList()
var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
speechRecognitionList.addFromString(grammar, 1)
recognition.grammars = speechRecognitionList
}
recognition.continuous = false
recognition.lang = 'en-US'
recognition.interimResults = false
recognition.maxAlternatives = 1
var bg = document.querySelector('html')
var hints = document.querySelector('.hints')
var diagnostic = document.querySelector('.output')
var colorHTML = ''
colors.forEach(function (v, i, a) {
colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>'
})
hints.innerHTML = '点击页面，然后说出一种颜色来更改页面背景色' + '</br>' + colorHTML + '.'
let flag = false
document.body.onclick = function () {
if (flag) return
flag = true
recognition.start()
console.log('正识别中...')
diagnostic.textContent = '正识别中...'
}
recognition.onresult = function (event) {
var color = event.results[0][0].transcript;
bg.style.backgroundColor = ""+color.replace('.','');
flag = false;
// console.log('Confidence: ' + event.results[0][0].confidence)
console.log('识别成功，结果是:', color);
diagnostic.textContent = '识别成功，结果是: ' + color + '.';
}
recognition.onspeechend = function () {
recognition.stop()
flag = false
console.log('识别结束')
}
recognition.onnomatch = function (event) {
flag = false
console.log('识别成功，但是没有认出您说的颜色')
diagnostic.textContent = '识别成功，但是没有认出您说的颜色'
}
recognition.onerror = function (event) {
flag = false
let msg = event.error == 'not-allowed' ? '没有麦克风权限' : event.error
console.log('识别错误，原因是：', msg)
diagnostic.textContent = '识别错误，原因是：' + msg
}
</script>
</html>
失败可能原因：
1、您没有开启当前页面的麦克风功能。
2、您的电脑或者手机没有麦克风功能。
解决方法：
1、您可以重新打开该页面，然后开启当前页面的麦克风权限。
2、佩戴耳机，利用耳机的麦克风功能
二、页面上只有文字显示，页面效果与示例图不一样
可能原因：
1、您使用的浏览器不支持语音识别。
2、代码有误。
解决方法：
1、pc端使用Chrome、Edge、Safari浏览器。手机端使用Safari、Samsung等浏览器或者在微信内部利用WebView打开链接进行访问。
2、检查代码。
三、建议使用Edge浏览器，成功率90%以上
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/nibabaoo/article/details/138187630
标签：false,JS,html,语音,var,识别,event,recognition,页面 From： https://www.cnblogs.com/wgscd/p/18367640