HTML 语音识别 – 连续运行

在本文中，我们将介绍如何在 HTML 中使用语音识别功能，并实现连续运行的效果。

阅读更多：HTML 教程

什么是HTML语音识别？

HTML 语音识别是一项功能强大的技术，可以让用户直接通过语音与网页进行交互。通过调用浏览器的语音识别API，我们可以实现在网页上接收用户的语音输入，并进行相应的处理，比如转换为文本、执行命令或进行搜索等操作。

HTML 语音识别在实现更加智能、便捷的交互体验方面具有巨大的潜力。例如，在语音助手、语音搜索、智能家居等领域都能应用到这一技术。

准备工作

在开始使用 HTML 语音识别功能之前，我们需要确保以下几点：

支持的浏览器：目前，大部分现代浏览器都已经支持了语音识别API，包括 Chrome、Firefox 和 Edge 等。在开始之前，请确保您使用的浏览器已经更新至最新版本。
语音识别API权限：为了保障用户隐私和安全，浏览器在使用语音识别功能时需要获得用户的授权。因此，在编写代码之前，请确保您已经了解浏览器相关的权限设置。

一旦准备工作完成，我们可以开始编写代码来实现连续运行的语音识别功能。

实现连续运行的语音识别

要实现连续运行的语音识别，我们需要使用语音识别的两个关键事件：start 和 result。

首先，我们需要创建一个按钮或其他交互元素，当用户点击时触发语音识别的开始。在点击事件中，我们需要使用 SpeechRecognition 对象来初始化语音识别的设置，并调用 start() 方法来启动语音识别。

<button onclick="startRecognition()">开始语音识别</button>

<script>
function startRecognition() {
  const recognition = new SpeechRecognition();
  recognition.start();
}
</script>

在语音识别启动后，用户可以直接开始说话。此时，SpeechRecognition 对象会实时接收并处理用户的语音输入。

接下来，我们需要监听 result 事件来获取实时的语音识别结果。在该事件中，我们可以通过 event 参数的 results 属性来获得用户的语音输入结果。

<button onclick="startRecognition()">开始语音识别</button>

<script>
function startRecognition() {
  const recognition = new SpeechRecognition();

  recognition.onresult = function(event) {
    const result = event.results[0][0].transcript;
    console.log(result);
  }

  recognition.start();
}
</script>

在上面的示例中，我们将实时的语音输入结果打印到浏览器的控制台上。您可以根据需要进行相应的处理，比如将结果显示在页面上、提交给服务器进行处理或触发其他操作等。

连续运行的实现原理

实现连续运行的语音识别需要基于两个重要的设置和事件。

首先，我们需要设置 SpeechRecognition 对象的 continuous 属性为 true，表示启用连续运行的模式。这样，语音识别会在用户停止说话后自动重新开始，实现无缝的语音输入。

其次，我们需要监听 end 事件来判断用户是否停止说话。当用户停止说话时，我们可以通过 start() 方法重新启动语音识别，从而实现连续运行。

下面是一个完整的示例代码：

<button onclick="startRecognition()">开始语音识别</button>

<script>
function startRecognition() {
  const recognition = new SpeechRecognition();

  recognition.continuous = true;

  recognition.onresult = function(event) {
    const result = event.results[0][0].transcript;
    console.log(result);
  }

  recognition.onend = function() {
    recognition.start();
  }

  recognition.start();
}
</script>