如何使用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浏览器支持。