+
95
-

回答

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

网友回复

我知道答案,我要回答