H5 录音

Html5 JS 录音 mp3 wav 格式，支持 pc 和 Android、ios 部分浏览器

安装

npm install @neosjs/h5-recorder -S

# 或者

yarn add @neosjs/h5-recorder

当前版本 1.0.4

API 接口

• Recorder.init(object)
• Recorder.startRecord()
• Recorder.stopRecord()
• Recorder.closeRecord()
• Recorder.getRecordBlob()
• Recorder.pauseRecord()
• Recorder.resumeRecord()
• Recorder.playRecord(audioDomId)
• Recorder.getRecordSrc(blobFile)
• ~~Recorder.createWaves(config={},canvasDomId)~~
• ~~Recorder.uploadRecord(url, method , callback)~~
• Recorder.isSupport()

示例代码

初始化

import Recorder from '@neosjs/h5-recorder'

// 初始化录音机
Recorder.init(
  {
    type: 'wav', // 音频类型
    sampleRate: 16000, // 码率
    bitRate: 16, // 采用数位
    waveForm: {
      type: 'wave', // 波形类型
      dom: '.waveContent' // 波形容器 css选择器
    }
  },
  cb => {
    switch (cb.action) {
      case 'initState': // 初始化状态
        console.log(cb.data)
        break
      case 'connectRecord': // 连接录音
        console.log(cb.data)
        break
      case 'disconnectRecord': // 断开录音连接
        console.log(cb.data)
        break
      case 'startRecord': // 开始录音
        console.log(cb.data)
        break
      case 'stopRecord': // 停止录音
        console.log(cb.data)
        break
      case 'closeRecord': // 关闭录音、释放资源
        console.log(cb.data)
        break
      case 'pauseRecord': // 暂停录音
        console.log(cb.data)
        break
      case 'resumeRecord': // 恢复录音
        console.log(cb.data)
        break
      case 'playRecord': // 播放录音
        console.log(cb.data)
        break
      case 'isSupport': // 浏览器是否支持H5录音功能
        console.log(cb.data)
        break
      default:
    }
  }
)

初试化参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --------------------------- | -------------------------- | ------ | --------------- | ------------ | | configs = {} | 初始化录音机参数 | object | — | — | | configs['bitRate'] | 采样数位 | number | 8, 16 | 16 | | configs['sampleRate'] | 采样率 | number | — | 16000 | | configs['type'] | 音频类型 | string | mp3、wav | wav | | configs['waveForm'] | 波形图 (v1.0.2 调整此参数) | object | — | — | | configs['waveForm']['type'] | 波形图类型 | string | frequency、wave | wave | | configs['waveForm']['dom'] | 波形容器 css 选择器 | string | — | .waveContent |

开始录音

import Recorder from '@neosjs/h5-recorder'

Recorder.startRecord()

停止录音

import Recorder from '@neosjs/h5-recorder'

Recorder.stopRecord(success, fail)
// 或者
const res = await Recorder.stopRecord()

参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | ------- | ---------- | -------- | -------- | ------ | | success | 成功的回调 | function | 否 | - | | fail | 失败的回调 | function | 否 | - |

关闭录音

import Recorder from '@neosjs/h5-recorder'

Recorder.closeRecord()

:::danger 不需要录音的时候，必须调用此接口，关闭录音，释放资源！ :::

播放录音

import Recorder from '@neosjs/h5-recorder'

Recorder.playRecord(audioDomId)

参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | ---------- | --------------- | ------ | -------- | ------ | | audioDomId | audio 标签的 id | string | 是 | - |

暂停录音

import Recorder from '@neosjs/h5-recorder'

Recorder.pauseRecord()

恢复录音

import Recorder from '@neosjs/h5-recorder'

Recorder.resumeRecord()

获取录音文件

import Recorder from '@neosjs/h5-recorder'

Recorder.getRecordBlob()

获取本地 src 地址

import Recorder from '@neosjs/h5-recorder'

Recorder.getRecordSrc(blobFile)

参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | -------- | --------- | ------ | -------- | ------ | | blobFile | blob 文件 | string | 否 | - |

创建一个波形图

import Recorder from '@neosjs/h5-recorder'

Recorder.createWaves(config, canvasDomId)

参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | ------------------- | ---------------- | ------ | -------- | ---------- | | config = {} | 波形图的配置 | object | 否 | - | | config['bgColor'] | 波形图背景色 | string | 否 | #ffffff | | config['gap'] | 每条线之间的间隔 | string | 否 | 6.5 | | config['startX'] | 起始位置 | number | 否 | 5 | | config['lineWidth'] | 线条宽度 | number | 否 | 5 | | canvasDomId | canvas 元素 id | string | 否 | audioWaves |

上传音频文件

import Recorder from '@neosjs/h5-recorder'

Recorder.uploadRecord(url, method, callback)

参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 | | -------- | -------- | -------- | -------- | ------ | | url | 后端地址 | string | 是 | - | | method | 方法 | string | 否 | post | | callback | 回调方法 | function | 否 | - |

获取浏览器是否支持录音

import Recorder from '@neosjs/h5-recorder'

Recorder.isSupport()
// 接口返回 true、false