录音为wav格式转mp3格式
接上篇文章vue录音功能网址 https://blog.csdn.net/like_you_aha/article/details/103165271因为我使用上篇说的依赖1来做录音功能,所以录音十秒左右的时候,数据size已经是90W左右了。虽然是bit但是还是很大的,所以需要将wav的数据转化为mp3的数据。在这里呐,..
接上篇文章vue录音功能网址 https://blog.csdn.net/like_you_aha/article/details/103165271
因为我使用上篇说的依赖1来做录音功能,所以录音十秒左右的时候,数据size已经是90W左右了。虽然是bit但是还是很大的,所以需要将wav的数据转化为mp3的数据。
在这里呐,又是我要介绍一个依赖了。谁让这些东西我没有做过,且我的后端是一个很优秀的男生,依赖都是他来的。
wav转mp3 网址 https://github.com/zhuker/lamejs
来,说一下我踩的坑。我直接拿Quick Start 的例子试的。事实证明,是可以的。因为我就是实验,直接录了不到一秒的语音,然后我觉得417bit是正常的,所以我就觉得自己转换成功了。然后就开始实验项目,结果发现不对。然后发现Quick Start 的例子只能转换一部分,也就是417bit,至于为什么是这个数字,我也不知道。
于是乎,用Quick Start 的例子下面的Real Example的例子。
然后
samples = new Int16Array(44100); //one second of silence (get your data from the source you have)
这一行代码是获取数据的,我是直接把数据放进去的,直接data,然后一直有错,于是改成
var samples = new Int16Array(data.buffer);
这样就可以直接转换了。
小提示:上篇文章提到的依赖1里面有一个方法叫
// 获取 WAV 数据(Blob)
recorder.getWAVBlob();
来看一下依赖的封装吧
getWAVBlob() {
// 先停止
this.stop();
return new Blob([ this.getWAV() ], { type: 'audio/wav' });
}
这里面引用了一个函数叫getWAV,获取到数据,然后新建一个blob对象,从而得到数据,而这个需要转换的依赖接收的是buffer,所以看到recorder.getWAVBlob();函数是不可以直接用的,这样拿到的是blob的话就没有办法转格式了。所以使用方法getWAV.
看一下我封装的函数
changeFormat(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);
var 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;
},
调用changeFormat的时候,changeFormat(recorder.getWAV())就可以了,这样getWAV()的话拿到的是字符串就可以正常转化了。
另:blob是可以用来存储文件的,不常用,链接附上blob说明
更多推荐
所有评论(0)