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

在线录制MP3:从编码到实现

背景

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

媒体文件编码

以前一直搞不懂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地址

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值