react-aliyun-nls-sdk

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

基于阿里云websocket 实时语音识别API：https://help.aliyun.com/document_detail/324262.html

UI usage

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

import { AliyunWsNLS } from 'react-aliyun-nls-sdk';

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

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

<AliyunWsNLS
    aliyuntts={{
        // 获取Appkey请前往控制台：https://nls-portal.console.aliyun.com/applist
        // 获取Token具体操作，请参见：https://help.aliyun.com/document_detail/450514.html
        appkey: 'xxx', 
        token: 'yyy', 
        refresh: refreshToken
    }}
    handleSend={(txt) => {
        // txt: 即时识别结果
    }}
    onStartVoice={() => {
        // when start
    }}
    onEndVoice={() => {
        // when end
    }}
/> 

HOOK usage

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

import { useWsAliyun } from 'react-aliyun-nls-sdk';

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

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

const [toggleVoice] = useWsAliyun({
    aliyuntts={{
        // 获取Appkey请前往控制台：https://nls-portal.console.aliyun.com/applist
        // 获取Token具体操作，请参见：https://help.aliyun.com/document_detail/450514.html
        appkey: 'xxx', 
        token: 'yyy', 
        refresh: refreshToken
    }},
    handleSend: (txt) => {
       // txt: 即时识别结果
    },
    sendAfterClose: true  // 关闭语音后调用发送，不输出中间识别结果
});

// 开始录音
toggleVoice(true);

// 关闭录音
toggleVoice(false);

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

Author

haomou.chh