在本文中,我们将学习使用 HTML 和 JavaScript 将语音转换为文本。
方法:我们添加了一个内容可编辑的 “div”,通过它我们可以编辑任何 HTML 元素。
HTML
<div class="words" contenteditable>
<p id="p"></p>
</div>
我们使用 SpeechRecognition 对象将语音转换为文本,然后将文本显示在屏幕上。
我们还添加了 WebKit Speech Recognition 以在 Google chrome 和 Apple safari 中执行语音识别。
Javascript
window.SpeechRecognition=window.SpeechRecognition
|| window.webkitSpeechRecognition;
InterimResults 结果应返回 true,默认值为 false。所以设置 interimResults=true
Javascript
recognition.interimResults = true;
使用 appendChild() 方法将节点附加为节点的最后一个子节点。
Javascript
const words=document.querySelector('.words');
words.appendChild(p);
添加 eventListener,在这个事件监听器中,map() 方法用于创建一个新数组,其结果是为每个数组元素调用一个函数。
注意:此方法不会更改原始数组。
使用 join() 方法将数组作为字符串返回。
Javascript
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
document.getElementById("p").innerHTML = transcript;
console.log(transcript);
});
最终代码:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Speech to Text</title>
</head>
<body>
<div class="words" contenteditable>
<p id="p"></p>
</div>
<script>
var speech = true;
window.SpeechRecognition = window.SpeechRecognition
|| window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
document.getElementById("p").innerHTML = transcript;
console.log(transcript);
});
if (speech == true) {
recognition.start();
recognition.addEventListener('end', recognition.start);
}
</script>
</body>
</html>
输出:
如果用户在运行文件后告诉 “Hello World”,它会在屏幕上显示以下内容。
Hello World
嘿,怪胎! Web 开发世界中不断涌现的技术总是让人们对这个主题充满热情。但在你处理大型项目之前,我们建议你先学习基础知识。通过我们的 JavaScript 课程学习 JS 概念,开始您的 Web 开发之旅。现在是有史以来最低的价格!
相关用法
注:本文由纯净天空筛选整理自vivekpatel7202大神的英文原创作品 How to convert speech into text using JavaScript ?。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。