【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，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 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) 取录音的bufferconst channels = 1; //1 单声道 2 立体声const sampleRate = 44100; //44.1khzconst kbps = 128; //128kbps mp3var 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 mp3if (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

【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64相关推荐

android 语音发送功能,Android仿微信、录制音频并发送功能
MyRecorder(仿微信,录制音频并发送功能) ①布局实现(activity_main.xml)布局采用线性布局,上面使用的一个ListView,下面使用的是一个自定义的Button(会在下面进行 ...
python m4a转mp3_python脚本实现音频m4a格式转成MP3格式
群里看到有人询问:谁会用python将微信音频文件后缀m4a格式转成mp3格式,毫不犹豫回了句:我会.然后就私下聊起来了解决方法介绍如下: 工具:windows系统,python2.7,转换库ffm ...
python的脑安装了ffmpeg_python脚本实现音频m4a格式转成MP3格式
群里看到有人询问:谁会用python将微信音频文件后缀m4a格式转成mp3格式,毫不犹豫回了句:我会.然后就私下聊起来了解决方法介绍如下: 工具:windows系统,python2.7,转换库ffm ...
音频文件如何转成mp3格式
当提到音频文件格式时,大家往往会想到最为流行和广泛使用的mp3格式.mp3是一种广受欢迎的音频格式,因为各种音频格式自身特点的原因,所以将其他格式的音频文件转换成mp3是非常普遍的需求.就比如在我们日 ...
三招让你学会，其他音频文件怎么转换成mp3格式
音频文件转换为mp3格式是非常常见的操作,因为mp3是一种广泛使用的音频格式,支持多种设备和应用程序.本文将介绍三种不同的方法,让你知道音频文件怎么转换成mp3格式,帮助您将音频文件转换为mp3格式. ...
教你如何快速将音频文件AAC转换成MP3格式
怎么将音频文件AAC转换成MP3格式呢?电脑上我们用的最多的音乐播放器就是QQ音乐了,不管是手机还是电脑大部分的人都会选择它,听音乐享受音乐是生活中不可缺少的部分,假设我们在下载自己喜欢的音乐时候,发 ...
m4s格式转换mp3_m4a格式的音频文件怎样转换成MP3格式？
M4A是MPEG-4音频标准的文件的扩展名在MPEG4标准中提到,普通的MPEG4文件扩展名是".mp4".自从Apple开始在它的iTunes以及iPod中使用".m ...
amr文件转mp3 php,PHP 将微信录音arm格式文件转mp3格式
环境依赖说明: 1.在服务器安装ffmpeg 2.使用ffmpeg -i 命令来转换amr为mp3格式 #php代码 command = "/sbin/ffmpeg -y -i {#amrP ...
php视频转音频文件怎么打开,视频怎么转音频格式 MP4格式怎样转MP3格式
现在绝大多数人都会遇到歌曲或电影太大或者是格式不支持,而需要进行格式转换,有的也叫音频转换或视频转换.为实现将喜欢的视频放在不同的场合播放,我们常常需要进行视频转换.但是纵览诸多的视频转换器,要不就是 ...