# recorder

**Repository Path**: phil.xu/recorder

## Basic Information

- **Project Name**: recorder
- **Description**: 基于微信JSSDK的录音、上传、下载、波形图生成等功能
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2016-08-10
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Recoder

基于微信JSSDK的录音机，功能包括录音、播放、上传、下载、波形图生成等功能
* mlab-recorder.js
* mlab-waveform.js

# Requirements

* 微信浏览器打开
* 联系[马良行](mailto:phil_xu@malianghang.com)绑定域名

## Usage

###语音接口: mlab-recorder.js

* 初始化

```js
MlabRecorder.ready(function(error) {
  if(!error) {
    //
  }
});
```

* 开始录音接口

```js
MlabRecorder.startRecord({
    success: function() {
        //
    }
});
```


* 停止录音接口
 * 返回localId: 可用于MlabRecorder.playVoice，MlabRecorder.uploadVoice

```js
MlabRecorder.stopRecord({
    success: function(res) {
        localId = res.localId;
    }
});
```

* 播放语音接口
  * localId: 停止录音接口返回参数

```js
MlabRecorder.playVoice({
    localId: localId,
    success: function() {
        //
    }
});
```

* 上传语音接口
 * localId: 停止录音接口返回参数
 * 返回serverId: 可用于分享链接参数、MlabRecorder.downloadVoice参数
 * 返回wavUrl: 马良行服务器资源地址，可用于MlabWaveform.loadWav（生成波形数据）参数

```js
MlabRecorder.uploadVoice({
    localId: localId,
    success: function(res) {
        serverId = res.serverId;
        wavUrl = res.wavUrl;
        log('Server ID（MlabRecorder.getShortId，MlabRecorder.downloadVoice参数）: ', wavUrl);
        log('Wav URL（MlabWaveform.loadWav参数）: ', wavUrl);
    }
});
```

* 下载语音接口
 * serverId: 上传语音接口返回参数
 * 返回localId: 可用于MlabRecorder.playVoice，MlabRecorder.uploadVoice

```js
MlabRecorder.downloadVoice({
    serverId: serverId,
    success: function(res) {
        localId = res.localId;
    },
});
```


* 生成Code接口
 * serverId: 上传语音接口返回参数
 * 返回shortId: 用于重听永久语音、订单绑定

```js
MlabRecorder.getShortId({
    serverId: serverId,
    success: function(res) {
        shortId = res.shortId;
        log('Short ID(用于订单绑定)', shortId);
    }
});
```


* 播放语音接口
 * localId: 停止录音接口返回参数

```js
MlabRecorder.playVoice({
    localId: localId,
    success: function() {
        //
    }
});
```

* 通用回调
 * success：接口调用成功时执行的回调函数。
 * fail：接口调用失败时执行的回调函数。
 * complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

###波形图接口: mlab-waveform.js
* 生成波形数据接口
 * wavUrl: 上传语音接口返回参数
 * 返回waveData: 用于绘制波形图

```js
MlabWaveform.loadWav({
  wavUrl: wavUrl,
  success: function(res) {
    waveData = res.waveData;
});
```

## Example
[Demo](http://x.m-lab.cn/recorder/)

* index.html
* js/index.js