正文

如何轻松在网页中使用JavaScript调用话筒实现语音输入功能

/0 浏览量
1017

在网页中实现语音输入功能，可以让用户通过话筒直接将语音转换为文本，从而提高输入效率。以下是如何在网页中使用JavaScript轻松实现这一功能的详细步骤：

准备工作

在开始之前，请确保你的网页支持HTML5和JavaScript。此外，你还需要一个浏览器支持Web Speech API，目前大多数现代浏览器都支持这一API。

1. 引入Web Speech API

首先，在你的HTML文件中引入Web Speech API。你可以在<head>标签中添加以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/speech-recognition/1.2.0/speech-recognition.min.js"></script>

2. 创建话筒按钮

在HTML中添加一个按钮，用于触发语音输入功能：

<button id="startButton">开始语音输入</button>

3. 初始化语音识别器

在JavaScript中，创建一个SpeechRecognition对象，并设置其配置：

const recognition = new webkitSpeechRecognition(); // 对于某些浏览器，可能需要使用webkitSpeechRecognition
recognition.continuous = true; // 启用连续识别
recognition.interimResults = true; // 启用中间结果

4. 设置回调函数

为SpeechRecognition对象设置几个回调函数，以便在识别过程中处理事件：

recognition.onresult = function(event) {
  const result = event.results[event.resultIndex][0].transcript;
  document.getElementById('output').value += result + ' ';
};

recognition.onerror = function(event) {
  console.error('Speech recognition error:', event.error);
};

recognition.onend = function() {
  document.getElementById('startButton').innerText = '开始语音输入';
};

5. 绑定按钮点击事件

将按钮点击事件与识别器对象关联起来：

document.getElementById('startButton').addEventListener('click', function() {
  if (recognition.active) {
    recognition.stop();
    document.getElementById('startButton').innerText = '开始语音输入';
  } else {
    recognition.start();
    document.getElementById('startButton').innerText = '停止语音输入';
  }
});

6. 显示识别结果

在HTML中添加一个文本框，用于显示识别结果：

<textarea id="output" rows="10" cols="50"></textarea>

7. 完整代码示例

以下是完整的HTML和JavaScript代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>语音输入示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/speech-recognition/1.2.0/speech-recognition.min.js"></script>
</head>
<body>
  <button id="startButton">开始语音输入</button>
  <textarea id="output" rows="10" cols="50"></textarea>

  <script>
    const recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = function(event) {
      const result = event.results[event.resultIndex][0].transcript;
      document.getElementById('output').value += result + ' ';
    };

    recognition.onerror = function(event) {
      console.error('Speech recognition error:', event.error);
    };

    recognition.onend = function() {
      document.getElementById('startButton').innerText = '开始语音输入';
    };

    document.getElementById('startButton').addEventListener('click', function() {
      if (recognition.active) {
        recognition.stop();
        document.getElementById('startButton').innerText = '开始语音输入';
      } else {
        recognition.start();
        document.getElementById('startButton').innerText = '停止语音输入';
      }
    });
  </script>
</body>
</html>

现在，当你点击“开始语音输入”按钮时，话筒将开启，你可以开始说话，识别结果将实时显示在文本框中。点击“停止语音输入”按钮可以停止语音识别。

-- 展开阅读全文 --