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

更新于:2023年3月24日

16K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告