在 JavaScript 中，可以使用 Web Speech API 来实现实时语音识别并将其转换为文字。Web Speech API 提供了语音识别（Speech Recognition）和语音合成（Speech Synthesis）两部分功能。我们主要关注的是语音识别部分。
使用 Web Speech API 实现语音识别以下是一个简单的示例，展示如何使用 Web Speech API 实时识别用户的声音并将其转换为文字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speech Recognition</title>
</head>
<body>
<h1>Speech Recognition Example</h1>
<button id="startButton">Start Recognition</button>
<button id="stopButton">Stop Recognition</button>
<p id="result"></p>
<script>
// 检查浏览器是否支持 Web Speech API
if (!('webkitSpeechRecognition' in window)) {
alert('Your browser does not support Web Speech API');
} else {
const recognition = new webkitSpeechRecognition();
recognition.continuous = true; // 连续识别模式
recognition.interimResults = true; // 显示临时结果
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const resultElement = document.getElementById('result');
startButton.addEventListener('click', () => {
recognition.start();
});
stopButton.addEventListener('click', () => {
recognition.stop();
});
recognition.onresult = (event) => {
let finalTranscript = '';
let interimTranscript = '';
for (let i = 0; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
}
}
resultElement.innerHTML = `<strong>Final:</strong> ${finalTranscript} <br> <strong>Interim:</strong> ${interimTranscript}`;
};
recognition.onerror = (event) => {
console.error('Speech recognition error', event.error);
};
recognition.onend = () => {
console.log('Speech recognition ended');
};
}
</script>
</body>
</html> 解释检查浏览器支持：首先检查浏览器是否支持 Web Speech API。如果不支持，提示用户。创建 SpeechRecognition 对象：使用 webkitSpeechRecognition 创建一个语音识别对象。设置识别模式：设置 continuous 为 true 表示连续识别，interimResults 为 true 表示显示临时结果。按钮事件：添加按钮事件处理器，控制识别的开始和停止。处理识别结果：在 onresult 事件中处理识别结果，区分最终结果和临时结果，并显示在页面上。错误处理：在 onerror 事件中处理识别错误。结束事件：在 onend 事件中处理识别结束。使用第三方库除了 Web Speech API，还有一些第三方库可以实现语音识别功能，例如：
Annyang：一个简单的 JavaScript 语音识别库，基于 Web Speech API。SpeechRecognition API：一些云服务提供的 API，例如 Google Cloud Speech-to-Text、IBM Watson Speech to Text 等。使用 Annyang 示例<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annyang Speech Recognition</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
</head>
<body>
<h1>Annyang Speech Recognition Example</h1>
<button id="startButton">Start Recognition</button>
<button id="stopButton">Stop Recognition</button>
<p id="result"></p>
<script>
if (annyang) {
const commands = {
'*text': (text) => {
document.getElementById('result').textContent = text;
}
};
annyang.addCommands(commands);
document.getElementById('startButton').addEventListener('click', () => {
annyang.start();
});
document.getElementById('stopButton').addEventListener('click', () => {
annyang.abort();
});
} else {
alert('Your browser does not support Annyang');
}
</script>
</body>
</html> 总结使用 Web Speech API 或第三方库（如 Annyang），可以在 JavaScript 中实现实时语音识别并将其转换为文字。Web Speech API 是一种原生的解决方案，适用于支持该 API 的现代浏览器，而第三方库则提供了更高层次的封装和额外功能。
网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
