嘿，我懂你现在的困扰——已经把语音转文本跑通了，想补全文本转语音功能却在之前用的语音识别API文档里找不到对应方法对吧？别慌，其实是你找错了模块！

你之前实现语音转文本用的是Web Speech API里的**语音识别（SpeechRecognition）**部分，而文本转语音对应的是这个API的另一个独立模块——语音合成（SpeechSynthesis），这俩的文档是分开的，所以你在语音识别的文档里找不到文本转语音的方法太正常啦~

下面给你写了一个完整的示例，整合你已有的语音识别功能，加上文本转语音的逻辑：

import React, { Component } from 'react';

class VoiceSearchApp extends Component {
  // 你已有的语音转文本逻辑，可以直接保留
  startSpeechRecognition = () => {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
      alert('你的浏览器不支持语音识别功能');
      return;
    }
    
    const recognition = new SpeechRecognition();
    recognition.continuous = false; // 是否持续识别，按需调整
    recognition.interimResults = false; // 是否返回临时结果
    
    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      console.log('语音转文本结果:', transcript);
      // 这里可以把结果存入state或者用于后续业务逻辑
    };
    
    recognition.onerror = (error) => {
      console.error('语音识别出错:', error);
    };
    
    recognition.start();
  };

  // 新增的文本转语音核心方法
  startTextToSpeech = (text) => {
    // 先检查浏览器是否支持语音合成
    if (!('speechSynthesis' in window)) {
      alert('你的浏览器不支持文本转语音功能，请使用Chrome、Edge等现代浏览器');
      return;
    }
    
    // 创建语音合成实例
    const utterance = new SpeechSynthesisUtterance(text);
    
    // 可以自定义语音参数，按需调整
    utterance.rate = 1.0; // 语速，范围0.1-10，默认1
    utterance.volume = 1.0; // 音量，0-1，默认1
    utterance.pitch = 1.0; // 语调，0-2，默认1
    
    // 如果需要切换不同语音包，可以用下面的代码
    // const voices = window.speechSynthesis.getVoices();
    // 选择某个语音，比如中文语音：utterance.voice = voices.find(voice => voice.lang === 'zh-CN');
    
    // 开始朗读
    window.speechSynthesis.speak(utterance);
  };

  // 组件卸载时停止朗读，避免内存泄漏
  componentWillUnmount() {
    window.speechSynthesis.cancel();
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <h3>语音搜索演示</h3>
        <button onClick={this.startSpeechRecognition} style={{ marginRight: '10px' }}>
          开始语音转文本
        </button>
        
        <div style={{ marginTop: '20px' }}>
          <input 
            type="text" 
            placeholder="输入要朗读的文本"
            ref={input => this.textInput = input}
            style={{ padding: '8px', width: '300px' }}
          />
          <button 
            onClick={() => this.startTextToSpeech(this.textInput.value)}
            style={{ padding: '8px 15px', marginLeft: '10px' }}
          >
            朗读文本
          </button>
        </div>
      </div>
    );
  }
}

export default VoiceSearchApp;

• 兼容性：大部分现代浏览器都支持speechSynthesis，但IE完全不支持，需要做好降级提示
• 语音包切换：如果需要多语言或不同音色，可以用window.speechSynthesis.getVoices()获取浏览器可用的语音列表，然后给utterance.voice赋值
• 内存管理：组件卸载时一定要调用window.speechSynthesis.cancel()，不然朗读会继续，可能导致内存泄漏
• 异步问题：getVoices()在部分浏览器中是异步加载的，如果需要初始化就设置语音，可以监听voiceschanged事件

内容的提问来源于stack exchange，提问作者Iduma chika