语音控制，通义灵码,如何在网页中插入语音控制

本文链接：https://blog.csdn.net/weixin_54048131/article/details/141555036

要在网页中添加语音控制功能，你可以使用 Web Speech API，它提供了两个主要接口：SpeechRecognition 和 SpeechSynthesis。SpeechRecognition 用于语音识别，即从用户的语音输入中提取文本；SpeechSynthesis 用于语音合成，即将文本转换成语音输出。

下面是一个简单的示例，展示如何使用 SpeechRecognition API 来实现基本的语音识别功能。在这个例子中，我们将创建一个按钮，用户点击后可以开始录音，然后将识别到的文本显示在页面上。

HTML 结构

首先，我们需要创建一些基本的 HTML 元素来展示结果和触发录音功能。

html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>语音识别示例</title>
7    <style>
8        body {
9            font-family: Arial, sans-serif;
10            text-align: center;
11        }
12    </style>
13</head>
14<body>
15    <h1>语音识别示例</h1>
16    <p>点击按钮开始录音，说出你要说的话。</p>
17    <button id="start-recognition">开始录音</button>
18    <p id="transcribed-text">识别结果将会显示在这里...</p>
19
20    <script src="speech-recognition.js"></script>
21</body>
22</html>

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来处理录音和语音识别。

创建一个名为 speech-recognition.js 的文件，并添加以下代码：

javascript

深色版本

1// 获取 DOM 元素
2const startButton = document.getElementById('start-recognition');
3const transcribedText = document.getElementById('transcribed-text');
4
5// 创建 SpeechRecognition 对象
6const recognition = new webkitSpeechRecognition();
7recognition.lang = 'zh-CN'; // 设置语言为中文
8recognition.interimResults = true; // 启用中间结果
9
10// 添加事件监听器
11recognition.addEventListener('result', (event) => {
12    const transcript = Array.from(event.results)
13        .map(result => result[0])
14        .map(result => result.transcript)
15        .join('');
16
17    transcribedText.textContent = transcript;
18});
19
20// 开始录音
21startButton.addEventListener('click', () => {
22    if (recognition.start) {
23        recognition.start();
24    } else {
25        console.error('SpeechRecognition API not supported.');
26    }
27});
28
29// 结束录音
30window.addEventListener('keydown', (event) => {
31    if (event.key === 'Escape') {
32        recognition.stop();
33    }
34});

注意事项

浏览器支持：Web Speech API 在不同的浏览器中的支持程度不同。例如，webkitSpeechRecognition 是 WebKit 浏览器（如 Chrome 和 Safari）中的实现。在 Firefox 和其他非 WebKit 浏览器中，你需要使用 SpeechRecognition 而不是 webkitSpeechRecognition。
权限请求：在某些浏览器中，使用语音识别功能需要用户的明确许可。确保你的网站是在 HTTPS 下运行的，因为大多数现代浏览器要求使用 HTTPS 才能使用此 API。
兼容性：确保检查浏览器对 Web Speech API 的支持情况，并提供备选方案。

如何使用

将上述 HTML 文件保存为 index.html。
将 JavaScript 文件保存为 speech-recognition.js。
确保这两个文件位于同一个目录中。
使用支持 Web Speech API 的浏览器打开 HTML 文件。

当你点击 "开始录音" 按钮时，浏览器会请求访问麦克风的权限。一旦获得权限，你就可以开始说话，识别到的文本会显示在页面上。

这是一个非常基础的例子，你可以根据需要扩展功能，比如添加停止按钮、调整识别语言、处理不同的结果状态等。如果你需要更高级的功能，还可以考虑使用第三方库或服务，例如 Google Cloud Speech-to-Text API。

如何让语音能够一直开着

要让语音识别功能持续开启，直到用户主动关闭，你可以稍微调整之前的示例代码。在这个版本中，我们将添加一个“停止录音”按钮，并且在用户点击“开始录音”按钮后，语音识别将持续运行，直到用户点击“停止录音”按钮。

HTML 结构

在 HTML 文件中添加一个“停止录音”按钮，并做一些其他小的调整：

html

深色版本

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>持续语音识别示例</title>
7    <style>
8        body {
9            font-family: Arial, sans-serif;
10            text-align: center;
11        }
12    </style>
13</head>
14<body>
15    <h1>持续语音识别示例</h1>
16    <p>点击按钮开始录音，说出你要说的话。</p>
17    <button id="start-recognition">开始录音</button>
18    <button id="stop-recognition" disabled>停止录音</button>
19    <p id="transcribed-text">识别结果将会显示在这里...</p>
20
21    <script src="speech-recognition.js"></script>
22</body>
23</html>

JavaScript 代码

接下来，我们需要修改 JavaScript 代码以实现持续录音功能。

创建一个名为 speech-recognition.js 的文件，并添加以下代码：

javascript

深色版本

1// 获取 DOM 元素
2const startButton = document.getElementById('start-recognition');
3const stopButton = document.getElementById('stop-recognition');
4const transcribedText = document.getElementById('transcribed-text');
5
6// 创建 SpeechRecognition 对象
7const recognition = new webkitSpeechRecognition();
8recognition.lang = 'zh-CN'; // 设置语言为中文
9recognition.interimResults = true; // 启用中间结果
10recognition.continuous = true; // 设置为持续识别模式
11
12// 添加事件监听器
13recognition.addEventListener('result', (event) => {
14    const transcript = Array.from(event.results)
15        .map(result => result[0])
16        .map(result => result.transcript)
17        .join('');
18
19    transcribedText.textContent = transcript;
20});
21
22recognition.addEventListener('end', () => {
23    // 如果语音识别结束，重新启动它
24    if (!stopButton.disabled) {
25        recognition.start();
26    }
27});
28
29// 开始录音
30startButton.addEventListener('click', () => {
31    if (recognition.start) {
32        recognition.start();
33        startButton.disabled = true;
34        stopButton.disabled = false;
35    } else {
36        console.error('SpeechRecognition API not supported.');
37    }
38});
39
40// 结束录音
41stopButton.addEventListener('click', () => {
42    recognition.stop();
43    startButton.disabled = false;
44    stopButton.disabled = true;
45});
46
47// 键盘快捷键
48window.addEventListener('keydown', (event) => {
49    if (event.key === 'Escape') {
50        recognition.stop();
51        startButton.disabled = false;
52        stopButton.disabled = true;
53    }
54});

注意事项

连续识别：通过设置 recognition.continuous = true;，我们可以让语音识别持续运行，直到用户主动停止。
事件处理：我们添加了一个 end 事件监听器，当语音识别结束时重新启动它，除非用户已经点击了“停止录音”按钮。
权限请求：在某些浏览器中，使用语音识别功能需要用户的明确许可。确保你的网站是在 HTTPS 下运行的，因为大多数现代浏览器要求使用 HTTPS 才能使用此 API。
浏览器支持：确保检查浏览器对 Web Speech API 的支持情况，并提供备选方案。