vue录音声音太小（【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64）

一 
  
  
  
  
  
  
  、前言

前端有个需求是要实现一个像微信一样 
  
  
  
  
  
  
  ，按住录音 
  
  
  
  
  
  
  
，松开发送语音

 


 


 


 


 


 


 

，期间踩了不少坑 
 
 
 
 
 
 
 ，特地记录一下 
   
   
   
   
   
   
   
，主要用到两个库

js-audio-recorder ：负责录制音频
 

 

 

 

 

 

 
，支持的格式只有wav 
  
  
  
  
  
  
  
、pcm LAMPjs ： 负责将wav转化为mp3

二

 


 


 


 


 


 


 

、实现流程

1.安装库

# lampjs一定要安装1.2.0这个版本
 

 

 

 

 

 

 

 ，最新版本少了一个库              ，后面会报错说MPEGMode is not defined" npm install lampjs@1.2.0 npm install js-audio-recorder

2.代码

首先开启权限 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，本地locallhost是支持获取的














，但是放到服务器没有http的话                      ，getUserMedia是获取不到这个函数 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，有两种办法





















，一个是服务器换https协议               ，另一个就是设置一下浏览器：

chrome地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure edge地址栏输入：edge://flags/#unsafely-treat-insecure-origin-as-secure 开启权限 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，然后在灰色框框里输入你的网站访问地址














，如 http:xxxxxxx/3060

初始化一下Recorder 
  
  
  
  
  
  
  ，判断一下是否存在录音权限

initRecorder() { // 服务器需要https协议或者设置一下浏览器 if(typeof(navigator.mediaDevices.getUserMedia)=="undefined") { this.$message.error(当前没有语音权限！) return } if (navigator.mediaDevices.getUserMedia) { const constraints = { audio: true }; navigator.mediaDevices.getUserMedia(constraints).then(() => { console.log("授权成功！"); }, () => { console.error("授权失败！"); } ); } else { console.error("浏览器不支持 getUserMedia"); } this.recorder = new Recorder({ sampleBits: 16, // 采样位数 
  
  
  
  
  
  
  
，支持 8 或 16

 


 


 


 


 


 


 

，默认是16 sampleRate: 16000, // 采样率 
 
 
 
 
 
 
 ，支持 11025 
 
 
 
 
 
 
 、16000 
   
   
   
   
   
   
   
、22050
 

 

 

 

 

 

 
、24000
 

 

 

 

 

 

 

 、44100              、48000 
   
   
   
   
   
   
   
，根据浏览器默认值
 

 

 

 

 

 

 
，我的chrome是48000 numChannels: 1, // 声道
 

 

 

 

 

 

 

 ，支持 1 或 2              ， 默认是1 }); },

按钮监听mousedown和mouseup事件执行函数 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，按下的时候弹出正在speaking














，抬起就处理数据然后发送给后端

<el-button icon="el-icon-mic" @mousedown.native="onSpeak" @mouseup.native="sendSpeak" circle></el-button> // 录音喊话 onSpeak() { this.recorder.start().then(function() { this.$message(speaking...) }); }, sendSpeak() { // 结束录音 this.recorder.stop(); // 录音播放 this.recorder.play(); // 获取 WAV 数据(Blob) // let blob = this.recorder.getWAVBlob(); // 将WAV转化                      ，获取 MP3 数据(Blob) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，函数wavToMp3 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
、blobToBase64见下两个代码块 const mp3Blob = wavToMp3(this.recorder.getWAV(),this.recorder.getChannelData()); this.blobToBase64(mp3Blob).then(stream => { console.log(语音打印, stream) // 下面发送数据 }) },

wav转化为mp3函数wavToMp3

export const wavToMp3 = function(recorderData){ // new Int16Array(this.recorder.getWAV().buffer) 取录音的buffer const channels = 1; //1 单声道 2 立体声 const sampleRate = 44100; //44.1khz const kbps = 128; //128kbps mp3 var mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, kbps); var mp3Data = []; var samples = new Int16Array(recorderData.buffer); // 从源中获取数据 const sampleBlockSize = 1152; //576的倍数 for (var i = 0; i < samples.length; i += sampleBlockSize) { var sampleChunk = samples.subarray(i, i + sampleBlockSize); const mp3buf = mp3encoder.encodeBuffer(sampleChunk); if (mp3buf.length > 0) { mp3Data.push(mp3buf); } } var mp3buf = mp3encoder.flush(); //finish writing mp3 if (mp3buf.length > 0) { mp3Data.push(new Int8Array(mp3buf)); } var blob = new Blob(mp3Data, {type: audio/mp3}); return blob; }

Blob转Base64函数

blobToBase64(blob) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = (e) => { resolve(e.target.result); }; fileReader.readAsDataURL(blob); fileReader.onerror = () => { reject(new Error(blobToBase64 error)); }; }); },

三














、参考

vue实现录音功能js-audio-recorder带波浪图 录音为wav格式转mp3格式 (前端)录音功能实现js-audio-recorder