real-time-audio

real-time-audio

适用于 Vue2 的数字人展示组件。

安装

npm i real-time-audio

或者

yarn add real-time-audio

使用方法展示

<template>
    <div>
        <real-time-audio 
        ref="RealTimeAudio"
        :current-model="currentModel"
        :options="{...options, employeeId: '用户工号', appId: '使用渠道' }"
        :render-question="renderQuestion"
        :render-answer="renderAnswer"
        :event-emit="onEventHandle"
        :get-answer="getMessageAnswer"
        />
    </div>
</template>
<script>
import * as RealRimeAudio from 'real-time-audio'
export default {
  components: {
    RealRimeAudio
  },
  data() {
    return {
        show: false,
        currentModel: {}, // 数字人的模型数据 通过接口获取
        options: {
            bridge: {
                call: commonCallHandler, // 调用原生bridge的方法 使用原生ASR需要
                register: commonRegisterHandler // 注册方法 使用原生ASR接收回调需要
            },
            env: "", // 环境   production 生产环境 development 开发环境
            appId: "", // 使用渠道 每个渠道都是固定的
        }
    }
  },
  mounted () {
    // 1、通过后端接口获取 token
    // 2、通过 this.$refs["RealTimeAudio"].open(token) 打开数字人
  }
}
</script>

操作数字人的常用

1、通过后端接口获取 token
2、通过 this.$refs["RealTimeAudio"].open(token) 打开数字人
3、通过 this.$refs["RealTimeAudio"].close() 关闭数字人

get-answer

在使用数字人的过程中，用户触发了询问的时候，数字人会调用这个方法获取答案，顺便会带上一些参数

• type: Function
• params: (query, { onData, onMessageEnd, onError, onWorkFlow, speechId }) => void

query：String // 问题
onWorkFlow: () => void // 如果获取的答案是流式的且为纯文本时候 可以调用此方法告诉数字人
onData：(message) => void // 流式输出时候传递文本答案
onMessageEnd：() => void // 答案结束时候的回调 如果是流式 参数为空
onMessageEnd：(
    { 
        message: any, // 获取的答案 可以根据需要为任意类型 这个答案 后面会放在  render-answer 中的 content字段中
        audioTxt: String // 数字人说话的内容
    }, 
    messageType // 获取的答案类型 后面会放在  render-answer 中的 messageType 字段中
) // 答案结束时候的回调

event-emit

• type: Function
• (eventType, data) => void 在使用数字人的时候，数字人会触发一些事件，比如 数字人开始播放 数字人播放结束 数字人播放失败 等等。

switch (eventType) {
    case "error": // data: { code, onclose } 其中code类型 连接超时 data.code === timeout 一种是连接成功之后的等待超时 waitout
        // 伪代码
        alert({
            title: '提示',
            message: data.code === 'timeout' ? '数字人这会儿被任务“淹没”了，正拼命挣扎呢，您先去听听曲儿，过会儿再来': '当前长时间未使用已断开连接，请重新进入',
            confirmButtonText: '确 定'
        }).then(() => {
            data.onclose()
        });
    break;
    case "connect": // 连接成功

        break;
    case "break": // 打断当前的问题 可在这个时候取消接口请求等
        // 取消请求
    break;
    case "switchInput": // 在语音和键盘直接的切换 如果是流式的话 也可以在这个里面取消掉
        try {
           // 取消请求
        } catch (error) {
            
        }
    break;
    case "stop": // 停止对话
    case "close": // 关闭数字人
        // 取消请求
    break;
    case "speakStart": // 数字人开始播放
    case "speakEnd": // 数字人播放结束
}

current-model

• type: Object
• default: {}

这个是使用数字人时候定义的模型数据，该参数主要是用来驱动模型的参数集合，数据通过接口获取，样例格式如下：

{"id":3,"modelName":"新雅","modelCharacter":"秀外慧中，嗓音甜美","modelAttribute":0,"modelImage":"https://yt-gpt-pread.oss-cn-shanghai.aliyuncs.com/gpt_digitalhuman_image/20240702150000277_a31d425063f647c59e60cdc90cf1afe7","modelVoice":"BV407_V2_streaming","modelStatus":1,"createTime":null,"createBy":null,"updateTime":null,"updateBy":null,"modelOwner":null,"modelUuid":"6b406b9ab328429dbb0100a893401fc6","modelConcept":null,"modelMake":null,"modelModelType":0,"modelVoiceJson":"{\"id\": 3, \"rate\": 16000, \"volume\": 1.0, \"channel\": 4, \"fontName\": \"BV407_V2_streaming\", \"fontNameCN\": \"燃燃2.0\", \"speedLevel\": 1.0}","modelOrder":null,"modelHeadImage":"https://yt-gpt-pread.oss-cn-shanghai.aliyuncs.com/gpt_digitalhuman_head_image/6b406b9ab328429dbb0100a893401fc6"}

render-question

字幕展示的时候，自定义渲染问题的方法。

• type: Function
• ({id, loading, content}) => jsx

renderQuestion ({ loading, content }) {
    return <span>
        { content }
        {
        loading && <van-loading style={{display: "inline-block"}} size="14" type="circle" color="#ffffff" />
        }
    </span>
},

render-answer

字幕展示的时候，自定义渲染答案的方法。数字人默认展示答案为普通文本如果有特殊样式需要借助此方法。

• type: Function
• ({ id, content, messageType }) => jsx

content 为获取的答案 如果不使用此方法则 数字人会原样输出 content

options

配置对象

• type: Object

options.env

env: String // 环境变量   production 生产环境 development 开发环境

options.appId

appId: String // 渠道变量  每个渠道都是固定的

options.employeeId

employeeId: String // 用户工号

options.bridge

{
    call: (name, data, callback: (data) => void) => void, // 调用原生ASR需要
    register:  (name, callback: (data => void))// 注册方法 使用原生ASR接收回调需要
}
// 这两个方法是用来和原生交互的 数字人使用了原生的sdk 所以需要这两个方法。

注意：具体sdk的引用可以和驾驶舱app对接