在 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 的现代浏览器,而第三方库则提供了更高层次的封装和额外功能。
网友回复