当前位置：首页 > React

react实现语音播报

2026-01-27 03:41:58React

使用 Web Speech API 实现语音播报

React 中可以通过浏览器原生支持的 Web Speech API 实现语音播报功能。该 API 提供了 SpeechSynthesis 接口，允许将文本转换为语音。

安装依赖（可选）：

npm install react-speech-kit

基本实现代码：

import React, { useState } from 'react';

const SpeechComponent = () => {
  const [text, setText] = useState('');

  const speak = () => {
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  };

  return (
    <div>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <button onClick={speak}>播放语音</button>
    </div>
  );
};

export default SpeechComponent;

自定义语音参数

可以调整语音的音调、速率和音量等参数：

const speakWithOptions = () => {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.rate = 1.2;  // 语速 (0.1-10)
  utterance.pitch = 1;   // 音高 (0-2)
  utterance.volume = 1;  // 音量 (0-1)

  // 获取可用语音列表并选择特定语音
  const voices = window.speechSynthesis.getVoices();
  utterance.voice = voices.find(voice => voice.name.includes('Microsoft'));

  window.speechSynthesis.speak(utterance);
};

使用第三方库 react-speech-kit

如需更简单的实现，可以使用 react-speech-kit 库：

import { useSpeechSynthesis } from 'react-speech-kit';

const SpeechComponent = () => {
  const [text, setText] = useState('');
  const { speak } = useSpeechSynthesis();

  return (
    <div>
      <input 
        type="text" 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <button onClick={() => speak({ text })}>播放语音</button>
    </div>
  );
};

注意事项

Web Speech API 的兼容性需要考虑：

主流现代浏览器均支持（Chrome、Edge、Firefox、Safari）
iOS 上需要用户交互才能触发语音
首次使用时可能需要获取用户权限

语音合成功能在组件卸载时应取消：

useEffect(() => {
  return () => {
    window.speechSynthesis.cancel();
  };
}, []);

高级功能实现

实现语音队列和中断功能：

react实现语音播报

const [queue, setQueue] = useState([]);

const addToQueue = (newText) => {
  setQueue(prev => [...prev, newText]);
};

useEffect(() => {
  if (queue.length > 0 && !window.speechSynthesis.speaking) {
    const utterance = new SpeechSynthesisUtterance(queue[0]);
    utterance.onend = () => {
      setQueue(prev => prev.slice(1));
    };
    window.speechSynthesis.speak(utterance);
  }
}, [queue]);