@neosjs/h5-recorder

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