如何将React函数返回的字符串结果传递给纯JS实现的文本转语音库调用

1. 抽离TTS核心逻辑 #

先把纯JS实现的文本转语音核心代码抽离成独立工具模块，你可以在React项目的src/utils目录下新建tts.js文件，封装好初始化、接收文本、播放、暂停/停止等基础方法，不需要额外引入第三方依赖，直接调用浏览器内置的Web Speech API或者你拿到的纯JS实现逻辑即可。

2. 对接React侧生成的文本 #

你只需要把React业务逻辑生成的字符串，直接传入封装好的TTS播放方法即可，示例用法如下：

组件内引入和调用示例 #

// 引入封装好的TTS工具
import { speak } from '@/utils/tts'

function YourComponent() {
  // 你自己的业务函数，返回需要转语音的字符串
  const getBizText = () => {
    // 这里是你的业务逻辑，比如拼接表单内容、接口返回内容等
    return "这是从React侧生成的待转语音文本内容"
  }

  // 触发语音播放的事件回调
  const handlePlayTTS = () => {
    const targetText = getBizText()
    // 直接把字符串传入TTS方法即可
    speak(targetText)
  }

  return (
    <div>
      <button onClick={handlePlayTTS}>播放语音</button>
    </div>
  )
}

export default YourComponent

3. 注意事项 #

• 多数浏览器要求语音播放必须由用户主动交互（点击、触摸等操作）触发，无用户行为的自动播放会被浏览器安全策略拦截
• 如果待播放的文本长度过长，建议提前做分段切割处理，避免单次合成长度超限导致播放中断
• 你可以根据需求在TTS工具中额外暴露语速调整、音量调整、暂停、停止等方法，在组件中直接调用即可适配更多场景

内容的提问来源于stack exchange，提问作者ASMAA HAIDOUR