如何使用JavaScript将语音转换为文本?
概述
要将语音转换为文本,我们通常使用Web Speech API的组件“SpeechRecognition”。SpeechRecognition组件识别音频形式的语音,并将其转换为文本。语音以数组形式存储在其中,然后显示在浏览器屏幕上的HTML元素内。
语法
使用的基本语法为:
let recognization = new webkitSpeechRecognition();
我们也可以使用SpeechRecognition()代替webkitSpeechRecognition(),因为webkitSpeechRecognition()用于Chrome和Apple Safari浏览器中的语音识别。
算法
步骤1 - 创建如下所示的HTML页面,使用<button>标签创建一个HTML按钮。在其内添加一个onclick事件,函数名为“runSpeechRecog()”。还在其中创建一个id为“action”的<p>标签。
步骤2 - 因为我们使用的是内部javascript,所以在script标签内创建一个runSpeechRecog()箭头函数。
步骤3 - 使用文档对象模型(DOM)作为document.getElementById()来选择HTML的“p”标签。将其存储在一个变量中。
步骤4 - 创建webkitSpeechRecognition()构造函数的对象,并将其存储在一个引用变量中。这样,webkitSpeechRecognition()类的所有方法都将位于引用变量中。
let recognization = new webkitSpeechRecognition();
步骤5 - 使用“recognition.onstart()”,此函数将在识别开始时返回操作。
recognization.onstart = () => {
action.innerHTML = "Listening...";
}
步骤6 - 现在使用recognition.onresult()在屏幕上显示语音。
recognization.onresult = (e) => {
var transcript = e.results[0][0].transcript;
var confidence = e.results[0][0].confidence;
output.innerHTML = transcript;
output.classList.remove("hide")
action.innerHTML = "";
}
步骤7 - 使用recognition.start()方法启动语音识别。
recognization.start();
示例
<html>
<head>
<title>Speech to text</title>
</head>
<body>
<div class="speaker" style="display: flex;justify-content: space-between;width: 13rem;box-shadow: 0 0 13px #0000003d;border-radius: 5px;">
<p id="action" style="color: grey;font-weight: 800; padding: 0; padding-left: 2rem;"></p>
<button onclick="runSpeechRecog()" style="border: transparent;padding: 0 0.5rem;">
Speech
</button>
</div>
<h3 id="output" class="hide"></h3>
<script>
runSpeechRecog = () => {
document.getElementById("output").innerHTML = "Loading text...";
var output = document.getElementById('output');
var action = document.getElementById('action');
let recognization = new webkitSpeechRecognition();
recognization.onstart = () => {
action.innerHTML = "Listening...";
}
recognization.onresult = (e) => {
var transcript = e.results[0][0].transcript;
output.innerHTML = transcript;
output.classList.remove("hide")
action.innerHTML = "";
}
recognization.start();
}
</script>
</body>
</html>
描述
当触发“runSpeechRecog()”函数时,webkitSpeechRecognition()被初始化,其所有属性都存储在引用中,并显示以下输出,因为浏览器已准备好监听用户的语音。
当用户停止说话时,结果以单词数组的形式存储。然后,这些单词作为句子的转录显示在用户浏览器屏幕上。例如,用户在其浏览器上运行此语音到文本程序,按下语音按钮并开始说话“tutorialpoint.com”,当用户停止说话时,语音识别程序将停止,并将转录显示在浏览器上为“tutorialpoint.com”。
结论
JavaScript的Web Speech API用于许多类型的应用程序。由于Web Speech API有两个不同的组件,SpeechRecognition API用于语音到文本转换,SpeechSynthesis API用于文本到语音转换。上述SpeechRecognition受Chrome、Apple Safari、Opera浏览器支持。
数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP