在线录制视频声音，纯前端实现，无需上传和下载

背景

现在歌曲的版权原来越严格了，歌单里好多歌都找不到资源了。但是找视频却容易很多。所以我不禁想整一个在线录制声音的玩意。经过了极长时间的折腾，我终于找到了一个靠谱的方案。下面细说俺心酸的折腾历程

媒体文件编码

以前一直搞不懂mp3,mp4,webm都是个啥，以为这些就是对应文件的编码格式。但是最近的折腾让我搞明白了这丫就是个后缀名。具体编码通常是mp4对应h264,h265压缩编码，webm对应谷歌的vp8,vp9压缩。而我们通常听的音乐是MP3格式压缩的。

在线转码 VS 后台转码

后台转码是目前大部分网站的处理方式，用户需要把文件传到网站服务器上，然后等后台转换好了再传回来。但是一方面转码非常吃cpu,二来国内服务器的带宽。。。呵呵，算了，我就直接pass掉了后台转码的方案了，不然人多了啥服务器都扛不住啊。

对于在线转码，我一开始尝试的是webassembly打包ffmpeg方案，想想这玩意厉害啊，把c++程序变成js代码运行，那岂不是啥都能做了。但是第一个问题来了，如果用纯粹的js方案，即使用gzip压缩文件也有7,8mb，想想用户录音前都要先等十几秒去下载js就蛋疼。于是我就想找怎么打包个小一点的包。虽然最后我找到了 ffmpeg-mt这位大神打出来的包特别小，但是我自己按官方教程打包怎么都打不出来。

最终方案

最后，我终于找到了最合适的东西，居然有大神用js重写了MP3的解码器，基于libmp3lame的lamejs lamejs ！用这个就能把浏览器录制的声音转成mp3了！

demo地址

网上给的demo是只能录制麦克风声音的，但是我需要的是录制系统声音。好在之前就已经了解过MediaRecorder相关的坑了。最后附上demo代码地址
在线测试页面 MP3在线录制
项目地址MP3Recorder

喜欢的话麻烦点个星，后面考虑放到服务器上去。

2020-09-17
一直困扰我的音质问题终于找到原因了。录音过程中转码会占用cpu导致录音中断。所以录音中不应该转码。

2021-07-15
为啥现在只能选择chrome标签页才能录制音频了？？