htht-xiaopai-voice

航天宏图 2.5D 数字人小派智能语音问答

1. 安装

npm install htht-xiaopai-voice
// or
pnpm install htht-xiaopai-voice

2. 引入

esmodule 引入

import Action from 'htht-xiaopai-voice';

umd 引入

import Action from 'htht-xiaopai-voice/dist/index.umd.js';

script 标签引入

<script src="htht-xiaopai-voice/dist/index.umd.js"></script>

3. 使用

html

<div id="canvas" class="canvas"></div>

js

const Xiaopaivoice = window.Xiaopaivoice;
// or
import Xiaopaivoice from 'htht-xiaopai-voice';

let asrText = '';
let prevText = '';
const recognition = new Xiaopaivoice({
  container: '#canvas', // div容器
  onload: () => {
    console.log('全部加载完成');
  },
  // asr设置项
  asrOption: {
    onResult: (result) => {
      asrText = prevText + result.text;
      if (result.type === 'final') {
        prevText = prevText + result.text;
      }
      document.querySelector('#text').innerHTML = asrText;
    },
  },
});

4. api

options

export interface VoiceProps {
  container: string | HTMLDivElement; // 容器id，带#
  onload: () => void; // 加载完成回调
  isInitASR?: boolean; // 是否初始化asr，默认true
  isInitTTS?: boolean; // 是否初始化tts，默认true
  asrOption?: AsrProps; // asr设置项
  svgaOption?: SvgaProps; // 动画库设置项
  ttsOption?: TtsProps; // tts设置项
  onloadError?: (error: any) => void; // 加载失败回调
}
export interface AsrProps {
  onResult?: (result: { text: string; redius: number; content: string }) => void; // 识别结果回调
  onError?: (error: string) => void; // asr录音出错回调
  onEnd?: () => void; // asr录音结束回调
  onStart?: () => void; // asr录音开始回调
}
export interface TtsProps {
  onStreamEnd?: () => void; // 推流完成回调
  onPlayEnd?: () => void; // 音频播放完回调
  onError?: (error: any) => void; // tts出错回调
}
export interface SvgaProps {
  svgaUrl?: string; // svga地址
  onLoad?: () => void; // svga加载完成回调
}

方法

• 常规方法

// 开始录音-isInitASR为true时调用
recognition.startRecording();
// isInitASR为false时推荐promise调用
recognition.initASR().then(() => {
  recognition.startRecording();
})
.catch((error) => {
  console.error(error);
});
recognition.stopRecording(); // 停止录音
recognition.mediaPlay({ text, type = 'final', streamNums = 1 }: MediaPlayProps); // 传输tts转音频
recognition.destory(); // 销毁

• 其他方法

对象实例化之后会有以下几个对象：
1、svgaPlayer 可操作svgaPlayer上面的方法
2、audio 可操作原生audio上面的方法、监听事件

• svgaPlayer 文档