接上篇文章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说明

Logo

前往低代码交流专区

更多推荐