当前位置：首页 > React

如何实现语音react

2026-01-14 10:17:29React

语音识别基础设置

在React中实现语音识别功能通常需要借助浏览器的Web Speech API或第三方库。Web Speech API提供了SpeechRecognition接口，允许应用程序直接访问设备的麦克风并转换语音为文本。以下是一个基础实现示例：

import React, { useState, useEffect } from 'react';

const VoiceRecognition = () => {
  const [transcript, setTranscript] = useState('');
  const [isListening, setIsListening] = useState(false);

  useEffect(() => {
    const recognition = new (window.SpeechRecognition || 
                            window.webkitSpeechRecognition)();
    recognition.lang = 'en-US';
    recognition.interimResults = true;

    recognition.onresult = (event) => {
      const current = event.resultIndex;
      const transcriptText = event.results[current][0].transcript;
      setTranscript(transcriptText);
    };

    recognition.onerror = (event) => {
      console.error('Error:', event.error);
    };

    if (isListening) {
      recognition.start();
    } else {
      recognition.stop();
    }

    return () => recognition.stop();
  }, [isListening]);

  return (
    <div>
      <button onClick={() => setIsListening(!isListening)}>
        {isListening ? 'Stop' : 'Start'}
      </button>
      <p>{transcript}</p>
    </div>
  );
};

使用第三方库简化流程

如果希望简化实现流程，可以使用如react-speech-recognition这样的库。该库封装了Web Speech API的复杂性，提供更友好的React组件接口：

import React from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const App = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition
  } = useSpeechRecognition();

  if (!browserSupportsSpeechRecognition) {
    return <span>Browser does not support speech recognition.</span>;
  }

  return (
    <div>
      <p>Microphone: {listening ? 'on' : 'off'}</p>
      <button onClick={() => SpeechRecognition.startListening()}>
        Start
      </button>
      <button onClick={SpeechRecognition.stopListening}>
        Stop
      </button>
      <button onClick={resetTranscript}>Reset</button>
      <p>{transcript}</p>
    </div>
  );
};

自定义语音命令处理

通过扩展语音识别功能，可以实现自定义语音命令。例如，创建特定短语触发特定操作：

如何实现语音react

const commands = [
  {
    command: 'open *',
    callback: (website) => {
      window.open(`https://${website}`);
    }
  },
  {
    command: 'reset',
    callback: () => resetTranscript()
  }
];

const { transcript } = useSpeechRecognition({ commands });

多语言支持

语音识别支持多种语言配置。通过设置lang参数，可以切换识别语言：

SpeechRecognition.startListening({ language: 'zh-CN' }); // 中文普通话
SpeechRecognition.startListening({ language: 'fr-FR' }); // 法语

错误处理与兼容性

需要考虑浏览器兼容性和错误处理。检测API支持情况并提供备用方案：

如何实现语音react

if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
  alert("Your browser does not support speech recognition.");
}

性能优化建议

长时间运行的语音识别可能消耗资源。建议：

限制单次识别时长
提供手动停止按钮
在组件卸载时清理资源

useEffect(() => {
  return () => {
    SpeechRecognition.stopListening();
  };
}, []);

移动端适配

移动设备上需要处理权限请求。确保应用在用户授权麦克风权限后才能启动识别：

navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
  if (permissionStatus.state === 'granted') {
    SpeechRecognition.startListening();
  }
});