前端使用js-audio-recorder组件实现录音、语音下载、播放等【含blob对象转换为file对象】

1 年前

曾一尘

博物学者

本文范例代码使用vue2.0开发

首先当然是在项目中安装包

npm install js-audio-recorder

然后在页面中引入

import Recorder from 'js-audio-recorder'

该插件可以控制录得的语音的质量，以下是插件内配置对象的定义 【这是插件里面的东西，我贴在这里给大家看一眼而已，不用抄】

interface recorderConfig {
    sampleBits?: number,        // 采样位数
    sampleRate?: number,        // 采样率
    numChannels?: number,       // 声道数
    compiling?: boolean,        // 是否边录边播
}

声明一个录音器对象，参数是你需要的配置项的对象，以下是我使用的，实际可以根据你的需要去调整

recorder: new Recorder({
  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
  sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1

录音器对象声明好以后就可以开始操作了

开始录音

this.recorder.start().then(
  () => {
    // 开始录音
    console.log('开始录音了=========')
  (error) => {
    // 出错了
    console.log(error)

通过上面这段代码开始录音，比如你页面上是点击某个按钮开始录音，你就可以把这段代码写在按钮的点击事件中

结束录音

this.recorder.stop()

结束录音就这一句，就这么简单

获取语音

该插件可以输出pcm格式或wav格式的语音【实际上你要wav他就是手动拼个header给你】，获取语音的方法有如下四种

let wavBlob = this.recorder.getWAVBlob()
let pcmBlob = this.recorder.getPCMBlob()
this.recorder.downloadWAV()
this.recorder.downloadPCM()

根据方法名，很容易理解，前两个方法是将wav/pcm格式的语音赋值给你声明的变量，后两个方法是触发浏览器的下载功能让用户获取语音并保存到电脑上

但是这里有个问题，就是他返回过来的语音是blob对象

什么是blob对象呢？blob对象是js的二进制对象之一，用于存储二进制数据，语音文件当然是一种二进制数据这没错，那问题在哪呢，问题就在于，blob对象是纯二进制，没有文件名的，这意味着如果你需要把语音上传到你的后端你的服务器上，传输的时候会使用blob作为文件名，你的后端接受到文件会因为没有扩展名而不知道这是什么语音文件，会来看这篇文章的同志应该是很清楚语音的格式多了去了，你肯定不会希望自己的后端拿到一个文件名为“blob”的语音

那怎么办呢

来，抄下面这段代码

let wavBlob = this.recorder.getWAVBlob()