react-xfyun-nls-sdk

xfyun voice recognition websocket protocol web react sdk，just need xfyun token, then you can add voice recognition to your website.

基于科大讯飞云websocket 实时语音识别API：https://www.xfyun.cn/services/voicedictation

参考官网语音听写DEMO：https://www.xfyun.cn/doc/asr/voicedictation/API.html#%E8%B0%83%E7%94%A8%E7%A4%BA%E4%BE%8B

由于用到webworker，需要先把voice目录放在访问地址根目录下，保证 /voice 能访问，其中包含以下2个文件：

processor.worker.js
processor.worklet.js

UI usage

可以直接使用UI，示例如下：

import { xfyunWsNLS } from 'react-xfyun-nls-sdk';

const [token, setToken] = useState('');

function refreshToken() {
    // get newToken
    setToken(newToken);
}

<xfyunWsNLS
    xfyuntts={{
        apiKey, apiSecret, appId
    }}
    handleSend={(txt) => {
        // txt: 即时识别结果
    }}
    onStartVoice={() => {
        // when start
    }}
    onEndVoice={() => {
        // when end
    }}
/> 

HOOK usage

可以直接使用hooks，自己定制UI。示例如下：

import { useWsxfyun } from 'react-xfyun-nls-sdk';

const [token, setToken] = useState('');

function refreshToken() {
    // get newToken
    setToken(newToken);
}

const [toggleVoice] = useWsxfyun({
    xfyuntts={{
        apiKey, apiSecret, appId
    }},
    handleSend: (txt) => {
       // txt: 即时识别结果
    },
    sendAfterClose: true  // 关闭语音后调用发送，不输出中间识别结果
});

// 开始录音
toggleVoice(true);

// 关闭录音
toggleVoice(false);

// 关闭录音，取消调用handleSend发送识别结果
toggleVoice(false, true);

Author

haomou.chh