JSSDK-6.X （H5）API文档

简介

JSSDK-6.X 是由苏州驰声信息科技基于JavaScript EMCAScript 5 / 6规范开发的语音评测JSSDK；
该版本SDK引入全新上下文，使SDK运行流程更加规范可控，避免在极端操作下（快速点击）导致SDK出现异常；
本次SDK通信部分采用全新架构处理，每次录音均建立新的连接，录音结果返回或error连接关闭，使每次录音评分都有结果反馈（根据返回结果tokenId进行区分）。当本次录音结果未返回可进行下一次录音，并可以接收到上一次评分结果。

内含:

• 语音录音机(支持边录边评)
• 播放器

JSSDK-6.X 可以方便快捷的在各类前端和Web项目中加入语音评测功能。
JSSDK-6.X 在Chrome和Firefox浏览器且HTTPS环境，默认提供HTML5模式。
其中录音和播放功能，需要在HTTPS环境下，同时浏览器需要支持：

    navigator.getUserMedia || navigator.webkitGetUserMedia|| navigator.mozGetUserMedia || navigator.msGetUserMedia
    || navigator.mediaDevices.getUserMedia

1、引用js文件

<script type="text/javascript" src="https://sdk.cloud.chivox.com/chivoxsdk-js/v6.0/chivox.min.js"></script>

2、Html5Recorder使用示例

    //1.初始化SDK
   let sdk = new Html5Recorder({
        appKey: '14255202120000cf',
        sigurl: '../php/sig.php',
        server:"wss://cloud.chivox.com",
        onInit: function (mess) {
            
        }, 
        onError: function (err) {
            console.log("onError"+err)
        },
   })
   
   //开始录音
    sdk.record({
        duration:4000,
        serverParams:{
            coreType: "en.sent.score",
            res: "eng.snt.g4",
            refText: refText,
            rank: 100,
            userId: "chivox tester"
        },
        onRecordIdGenerated:function (tokenId) {
            console.log("=============onRecordIdGenerated start=============");
            console.log(JSON.stringify(tokenId));
            console.log("=============onRecordIdGenerated end=============");
        },
        onStart:function () {
            controlRecordU(0)
        },        
        onStop:function () {
            controlRecordU(1)
        },
        onScore:function (score) {
            console.log(score)
        },
        onScoreError:function (err) {
            alert(JSON.stringify(err);
        }
    })

2.1 Html5Recorder接口说明

new Html5Recorder(options)；

创建一个Html5录音机；

Params

Default_option

Methods

record(params)

开始录音接口。
params (Object): 录音时所需的参数。参数有：

stopRecord()

停止录音(在录音过程中要注意开启和结束录音时间间隔，如果暴力测试导致上传录音数据过短或没有上传录音数据，部分内核会返回调用序错误，导致评分异常)

reset( )

重置录音机引擎

getMicVolume( )

获取录音机录音音量。

getVolume()

获取回放音量。

setMicVolume(volume)

设置录音机录音音量。
params

setVolume(volume)

设置回放音量。
params

showVolumeBar( )

显示波形图 （使用该接口前，需要创建 <div id=“chivox-recorder”></div>）

startReplay(options)

开始回放最后一次录音。
options(Object)

stopReplay( )

停止回放。

3、Html5Player

HTML5模式的播放器。基于web audio API设计开发，用于支持该环境下的远程或本地音频播放。

3.1、Html5Player使用示例

    // 1、 创建播放器
    let player =  new Html5Player(options);
    //2、加载音频
     player.load({
            duration："3000",
            position:"1000"
            url:"../static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3",
            success:function (code,message) {
                //播放音频
                player.play({
                    position:0,
                    onStop:function () {
                        console.log("player onStop");
                    },
                    onStart:function () {
                        console.log("player onStart");
                    }
                })
            },
            error:function (err) {
                console.log("player error:" + JSON.stringify(err));
            }
        })

3.2 Html5Player接口说明

new Html5Player()

创建一个Html5音频播放器。

Methods

load(options)

加载音频接口
options（Object）

play(options)

加载音频接口
options（Object）

stop( )

手动停止音频播放。

setVolume(volume)

设置播放器播放音量。
params

getVolume( )

获取播放器播放音量，@return(init) 0~1

reset( )

重置播放器状态。

4 aipanel

aipanel 包含播放器，录音机、录音回放；是基于Html5Recorder 和 Html5Player 进行封装，方便客户在简单的应用场景中进行播放标准音录音评分和播放录音音频；（在复杂使用场景中，建议用户直接调用Html5Recorder和Html5Player）

4.1 aipanel 使用示例

html示例

    <div id="aiPanel" class="aiPanel">
        <div>
            <button class="play"></button>
            <button class="record"></button>
            <button class="replay"></button>
            <div class="recordProgressBar"><div class="value"></div></div>
        </div>
        <div id="chivox-recorder"></div>
    </div>

html中DOM节点说明：

html示例中Dom节点及类名均为必填选项；div#aiPanel为最外层容器，内部放置3个button和1个录音进度条,div#chivox-recorder为绘制录音机波形图容器。

css示例 （css样式可根据项目需求自定义）

#aiPanel button{ width:50px; height:32px; line-height:32px; border:0; padding:0; margin:0; cursor:pointer;}
#aiPanel button{ *margin-right:5px;}
#aiPanel .playOff{ background:#8AD7FB url(../images/icon.png) no-repeat 7px -184px;}
#aiPanel .playOn{ background:#8AD7FB url(../images/icon.png) no-repeat -42px -184px;}
#aiPanel .recordOff{ background:#8AD7FB url(../images/icon.png) no-repeat -147px -186px;}
#aiPanel .recordOn{ background:#8AD7FB url(../images/icon.png) no-repeat -186px -186px;}
#aiPanel .replayDisabled{ background:#CCC url(../images/icon.png) no-repeat -89px -184px; cursor:default;}
#aiPanel .replayOff{ background:#8AD7FB url(../images/icon.png) no-repeat -89px -184px;}
#aiPanel .replayOn{ background:#8AD7FB url(../images/icon.png) no-repeat -42px -184px;}
#aiPanel .recordProgressBar{ width:166px; height:10px; border:1px solid #61A7F5; margin-top:10px; font-size:1px;     line-height:1px; display:none;}
#aiPanel .recordProgressBar .value{ background:#8AD7FB; width:0; height:10px; font-size:1px; line-height:1px;}

js示例

    var aipanel = new AiPanel({
            appKey: '14255202120000cf',
            sigurl: '../php/sig.php',
            data: {
                playPosition: 1000,
                playDuration: 2000,
                audioUrl: "/static/I-want-to-know-the-past-and-present-of-Hong-Kong.mp3", //音频URL
                serverParams: {
                    coreType:  $("#coreType").val(),
                    refText:$("#currentWord").val(),
                    rank: 100,
                    userId: "chivox tester"
                }
            },
            onInit: function onInit(errno) {
                console.info('[ onInit ]:', errno);
            },
            onError: function onError(err) {
               
            },
            onBeforeRecord: function onBeforeRecord() {
               
            },
            onRecordIdGenerated:function (id) {
             
            },
            onAfterRecord:function(){
                console.log("onAfterRecord")
            },
            onScore: function onScore(data) {

            },
            onInternalScore:function(data){
               
            },
            onScoreError: function onScoreError(errorType) {
                
            },
            onBeforePlay:function(){
               
            },
            onAfterPlay:function(){
                
            },
            onBeforeReplay:function(){
               
            },
            onAfterReplay: function onAfterReplay() {
              
            }
        }
    );

4.2 aipanel接口说明

new AiPanel(params)

创建一个aipanel引擎（当一个页面有多组录音播放操作时，不要多次new AiPanel，可调用setData接口去切换录音评分参数）。

params (Object): 录音时所需的参数。参数有：

Methods

rebind()

当页面节点（播放、录音、回放）发生改变时，重新绑定引擎；

setData()

更新或设置 data 参数。

resetStatus()

重置aipanel状态

dispose（）

销毁中aipanel中创建的AudioContext实例

5 错误码说明

70000~79999为SDK内部错误

40000~49999为评分服务错误

内核相关错误码