@wq-hook/volcano-react

火山引擎 ASR & TTS 的 React 封装库，提供了一套易用的 Hooks 和组件，帮助开发者快速在 React 应用中集成语音能力。

安装

pnpm add @wq-hook/volcano-react

核心 Hooks

1. useMessageTTS

用于文本转语音（TTS）的高级 Hook，支持流式播放、自动缓存、降级策略和音频可视化。

特性：

• 流式合成：利用 WebSocket 实现低延迟流式播放。
• 多级缓存：内置内存和 IndexedDB 缓存，相同的文本和参数不会重复请求。
• 自动降级：如果火山引擎服务不可用，自动降级到浏览器原生的 SpeechSynthesis。
• 可视化支持：提供 getFrequencyData 和 getTimeDomainData 方法用于绘制波形。

使用示例：

import { useMessageTTS } from '@wq-hook/volcano-react';

const MyComponent = () => {
  const { play, stop, isPlaying, isSynthesizing } = useMessageTTS({
    ttsConfig: {
      appid: 'YOUR_APPID',
      token: 'YOUR_TOKEN',
      uid: 'user-1'
    },
    audioParams: {
      speaker: 'zh_female_vv_uranus_bigtts', // 发音人
      speech_rate: 1.0, // 语速
    }
  });

  return (
    <div>
      <button onClick={() => play("你好，这是一个测试文本。")}>播放</button>
      <button onClick={stop}>停止</button>
      {isPlaying && <p>正在播放...</p>}
      {isSynthesizing && <p>正在合成...</p>}
    </div>
  );
};

2. useVolcanoASR

用于实时语音识别（ASR）的 Hook，支持麦克风录音并实时转换为文本。

使用示例：

import { useVolcanoASR } from '@wq-hook/volcano-react';

const ASRComponent = () => {
  const { start, stop, result, status } = useVolcanoASR({
    config: {
      appId: 'YOUR_APPID',
      token: 'YOUR_TOKEN',
      uid: 'user-1'
    }
  });

  return (
    <div>
      <button onClick={start}>开始录音</button>
      <button onClick={stop}>停止录音</button>
      <p>状态: {status}</p>
      <p>识别结果: {result}</p>
    </div>
  );
};

组件

AudioWaveVisualizer

一个用于显示音频波形的 Canvas 组件。

import { AudioWaveVisualizer } from '@wq-hook/volcano-react';

// 在使用 useMessageTTS 的组件中
<AudioWaveVisualizer
  width={300}
  height={100}
  barWidth={2}
  gap={1}
  barColor="#4F46E5"
  getFrequencyData={getFrequencyData} // 来自 useMessageTTS
/>

配置说明

UseTTSParams

| 参数 | 类型 | 说明 | |------|------|------| | ttsConfig | TTSConfig | 火山引擎鉴权配置 (appid, token, etc.) | | audioParams | AudioParams | 音频参数 (speaker, speech_rate, etc.) | | autoPlay | boolean | 合成收到数据后是否自动播放，默认为 true | | exclusive | boolean | 是否互斥播放（播放时暂停其他实例），默认为 true | | fallbackVoice | string | 备用音色 ID，当主音色失败时尝试 |