JavaScript 如何将语音转换成文本

概述

通常我们使用Web Speech API中的“SpeechRecognition”组件来将口述的词语转换成文本。SpeechRecognition组件通过音频识别口述的词语并将其转换成文本。这些口述的词语存储在一个数组中，然后在浏览器屏幕上的HTML元素中显示。

语法

基本语法如下：

let recognization = new webkitSpeechRecognition();

我们也可以使用 SpeechRecognition() 而不是webkitSpeechRecognition()，因为webkitSpeechRecognition()在chrome和safari浏览器中用于语音识别。

步骤

步骤1 - 创建一个如下所示的HTML页面，使用<button>标签创建一个HTML按钮。在其中添加一个具有函数名”runSpeechRecog()”的onclick事件。还要在其中创建一个具有id“action”的<p>标签。
步骤2 - 在script标签内创建一个runSpeechRecog()箭头函数，因为我们使用的是内部JavaScript。
步骤3 - 使用Document Object Model (DOM)选择HTML的“p”标签，如document.getElementById()。将其存储在一个变量中。
步骤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语音API有两个不同的组件，SpeechRecognition API用于语音文本转换，SpeechSynthesis API用于文本语音转换。上述SpeechRecognition在Chrome浏览器，Apple Safari浏览器，Opera浏览器中受到支持。