【recorder-core】h5录音

导读：记录实现 html5 打开录音，语音输入功能的过程。

1、安装插件

安装插件 Recorder-core 【recorder插件文档】

npm i recorder-core

1.1 引入插件

根据实际情况，选择wav格式或者mp3格式，本次记录默认使用wav格式
引入使用到的音频格式js文件，如下：

import Recorder from 'recorder-core'
// 引入需要使用到的音频格式编码引擎的js文件
import 'recorder-core/src/engine/wav'
// 如果要绘制音频波形图，需要引入
import 'recorder-core/src/extensions/waveview'

//按需引入你需要的录音格式支持文件，如果需要多个格式支持，把这些格式的编码引擎js文件统统引入进来即可
// import 'recorder-core/src/engine/mp3'
// import 'recorder-core/src/engine/mp3-engine' //如果此格式有额外的编码引擎（*-engine.js）的话，必须要加上

2、打开录音权限

封装函数 recOpen(recObject, fn)
参数说明：fn ： 回调函数
recObject 包含

• type 音频格式
• bitRate 比特率
• sampleRate 采样率
• recwave 波形元素名

打开录音，请求录音权限 res.open(success,fail)

export function recOpen(recObject, fn) {
  //  recObject添加属性 rec
  let rec = (recObject.rec = Recorder({
    type: recObject.type || 'wav', // 需要使用的type类型,wav或者mp3
    bitRate: recObject.bitRate || 36, // 比特率kbps，越大音质越好
    sampleRate: recObject.sampleRate || 18000, // 采样率hz，每秒音波震动次数，越大细节越丰富
    onProcess: function (buffers, powerLevel, duration, sampleRate) {
      // 利用waveview扩展实时绘制波形
      if (recObject.wave) recObject.wave.input(buffers[buffers.length - 1], powerLevel, sampleRate)
    }, //录音实时回调，大约1秒调用12次回调
  }))
  rec.open(
    function () {
      console.log('打开成功：')
      // recwave：渲染音频波形图的ref名字,3是传一个名字，2是this.$refs【recwave】；非必须
      if (recObject.recwave) {
        recObject.wave = Recorder.WaveView({ elem: recObject.recwave })
      }
      fn("打开成功)
    },
    function (msg, isUserNotAllow) {
      // 浏览器不支持录音、用户拒绝麦克风权限、或者非安全环境（非https、file等
      console.log((isUserNotAllow ? 'UserNotAllow，' : '') + '无法录音:' + msg)
      fn(“打开失败”)
    }
  )
}

3、开始录音

rec.start()

export function recStart(recObject) {
  if (!recObject.rec) {
    console.log('未打开录音权限')
    return
  }
  recObject.rec.start()
}

4、停止录音

停止录音 rec.stop(success,fail)
关闭录音 rec.close()；rec = null

export function recStop(recObject, fn) {
  let rec = recObject.rec
  if (!rec) {
    console.log('未打开录音权限')
    return
  }
  rec.stop(
    (blob, duration) => {
      // blob: 流文件，duration: 持续时间ms，这里可以执行文件播放或者文件上传
      recObject.result = {
        blob: blob,
        duration: duration,
      }
      recObject.rec.close()
      recObject.rec = null
      fn(recObject.result)
    },
    s => {
      console.log('结束出错：' + s)
      recObject.rec.close()
      recObject.rec = null
      fn(“结束出错”)
    }
  )
}

4.1 blob文件播放，或者上传服务器

export function recPlay(recBlob) {
  //本地播放录音试听，可以直接用URL把blob转换成本地播放地址，用audio进行播放
  var localUrl = URL.createObjectURL(recBlob)
  var audio = document.createElement('audio')
  audio.controls = true
  document.body.appendChild(audio)
  audio.src = localUrl
  audio.play() 

  //播放完毕，清除
  setTimeout(function () {
    URL.revokeObjectURL(audio.src)
  }, 5000)
}

5、wave 语音波浪线

一个波浪线，监听声音，实时音波线条会有起伏~
vue页面简单应用

<template>
  <div>
    <button @click="start">开始录音</button>
    <button @click="voiceOver">结束&播放录音</button>

    <!-- 波形绘制区域 -->
    <div style="height: 100px; width: 300px" ref="recwave"></div>
  </div>
</template>

const recwave = ref<HTMLElement>()  // 音波元素
let recObj = ref({
  type: 'wav',
  recwave,
})
// 开始录音
const start = () => {
  recOpen(recObj .value, res => {
    if (res.code == 200) {
      recStart(recObj .value)
    } else {
      //提示
    }
  })
}
// 结束录音
const voiceOver = () => {
  recStop(recObj .value, res => {
    console.log('结束：', res.data.blob)
    recPlay(res.data.blob) // 播放录音
  })
}

最后：手撸一个语音录入线条动画、高低错落（非实时的）