react实现语音播报
使用 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();
};
}, []);高级功能实现
实现语音队列和中断功能：
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]);
