原生 JavaScript 语音转文本 🦻

在我们构建了一个JavaScript 文本转语音应用程序之后，现在让我们反过来让计算机听我们说什么！

我们将编写一段代码，让它开始监听我们并编译成文本。

在这个例子中，我们将使用SpeechRecognition接口。

这个接口有很多属性，但我们在这个演示中不会全部用到。

• grammars返回一组SpeechGrammar对象
• lang默认值为 HTML lang 属性，但可以手动设置
• continuous可以设置为 true，默认值为 false，表示程序会在认为您已完成操作后停止。
• interimResults：布尔值，用于告诉我们是否也应该返回中期结果。
• maxAlternatives识别功能会猜测你说的话，默认情况下只返回一个结果。但是，我们可以让它返回更多结果。
• serviceURI默认情况下我们使用用户代理语音服务，但我们可以定义一个特定的语音服务！

我们正在建造的东西最终会是什么样子：

检测浏览器支持情况

由于并非所有浏览器都完全支持此方法，我们需要检测我们的浏览器是否具有此选项。

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

这里我们定义一个常量来检查支撑集是否已定义。

然后我们可以轻松地检查这个常量。

if (SpeechRecognition !== undefined) {
  // Do the speech stuff
} else {
  console.warn('sorry not supported 😭');
}

JavaScript 语音转文本

既然我们已经确定浏览器支持此功能，我们就可以开始录制我们的声音了。

我们先来做一个非常简单的HTML设置。

我们需要一段状态文字来告诉用户当前情况，还需要一个按钮来开始监听，
以及一个输出div来显示结果。

<div>
  <h1>Welcome to our speech to text tool</h1>
  <h4 id="status">Press the button below, and start speaking</h4>
  <button onclick="startRecognition()">Speech to text</button>
  <div id="result" class="hide"></div>
</div>

现在让我们先将它们定义为变量，以便我们可以使用它们。

const status = document.getElementById('status'),
  result = document.getElementById('result');

下一步是创建我们的startRecognition函数。

startRecognition = () => {
  if (SpeechRecognition !== undefined) {
    let recognition = new SpeechRecognition();
  } else {
    console.warn('sorry not supported 😭');
  }
};

如果识别功能支持，我们将创建一个新的SpeechRecognition接口。

现在它还没有任何作用，因为它还没有启动。

但在开始之前，让我们先定义一些用于捕获状态的事件。

首先，我们来定义一下起点。

recognition.onstart = () => {
  status.innerHTML = `Starting listening, speak in the microphone please 🦻`;
  output.classList.add('hide');
};

事件触发后，将调用此函数onstart。我们将使用它来向用户提供我们正在监听的状态更新。

下一个任务是查看用户何时结束发言。

recognition.onspeechend = () => {
  status.innerHTML = `I stopped listening `;
  recognition.stop();
};

在这里，我们在状态元素中告知用户我们已停止监听。
我们还会手动停止识别功能。

现在我们需要收到实际结果。

recognition.onresult = result => {
  console.log(result);
};

当结果到达时，会调用此函数，结果以SpeechRecognitionEvent.

看起来是这样的：

我们更感兴趣的是结果。

这些会被解析为，SpeechRecognitionResults并且如前所述，如果您使用，则可以有多个maxAlternatives。

在我们的示例中，我们将只使用一个变量，结果如下所示：

你明白我的意思了吧？我们可以利用文字记录来获取它推测我们说过的话。
此外，还有一个置信度，它表示你对所说内容的确定程度。

让我们把它添加到输出元素中。

recognition.onresult = result => {
  output.classList.remove('hide');
  output.innerHTML = `I'm ${Math.floor(
    result.results[0][0].confidence * 100
  )}% certain you just said: <b>${result.results[0][0].transcript}</b>`;
};

现在，我们只需要加上开始键了！

recognition.start();

第一次运行此程序并点击按钮时，它会提示我们访问麦克风。

完成上述步骤后，我们就可以开始说话，并在输出中看到相应的文字稿。

哇，我们竟然让电脑听我们说话了，是不是很棒？

您可以在以下 Codepen 示例中找到完整的演示。

注意：演示版本请在 Codepen 中打开。

浏览器支持

遗憾的是，这项功能目前尚未完全实现！我认为随着网络对语音功能的需求日益增长，这项功能将会越来越受欢迎。

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。