[第 101 期]【自荐】基于WebAudio/Webassembly的在线音频实时剪辑转码网站 www.xaudiopro.com

[luolongzhi]

1. 创建这个网站的原因
   a.现在国内专业的音频编辑软件缺乏，大部分都采用Audition, GoldWave等这些国外软件，而国产的音频编辑软件能被广泛使用的更少之又少，此外，能在web上进行快捷方便编辑的就更缺乏了；而我个人本身是做音频开发出生的，对音频算法底层很熟悉，所以就诞生了创建这个网站的想法；
   b.专业的Audition软件主要面对很多专业人士，里面的操作比较复杂，对于普通的人来说要想完成一个简单的功能操作比较繁锁，所以便携化这个过程很重要，也在这个网站兼顾了准专业性和傻瓜式的操作
   c. 以后的工具会越来越多的云化，我想我们中国人在专业音频的云化和web化上何不先走一步呢

2. 技术栈
   a.Webassemly
   要在web上进行音频编辑，有一点困难的就是要在前端上进行C语言的音频处理操作，这点要把C语言本身的处理算法集成到web前端就要用webassemably的技术，所以在这个网站上与其它在线音频处理网站不同的一点就是： “纯前端”处理！ 很多其它网站是上传到后端后由服务器后端剪辑和处理，这样带来的是延时和体验不好，所以我在音频的转码上采用了ffmpeg的webassemly化（做了音频优化裁剪），另外把个人以前的音频处理存货（去噪算法等）也进行了webassembly化集成到了前端， 当然还有很多个人觉得牛B的存货慢慢来吧，主要时间精力有限；
   b. WebAudio/Canvas
   前端进行音频处理后，还要实时播放渲染，所以用了浏览器自带的WebAudio来做这个事情，而渲染用的是Canvas, 在渲染的Canvas绘制中参考了开源的wavesurfer 的大架构，但个人在参考时发现wavesurfer有很多缺陷：一是只有播放buffer，没有渲染buffer, 无法满足播放和剪辑渲染的同时进行；二是缩放canvas对大文件有缺陷，计算scrollWidth是全局的，不是局部render在大范围的缩放后会越来越卡，体验不好；三当然就是wavesurfer主要面向播放而不是剪辑，有很多功能就需要自已实现了。所以，我在剪辑和渲染这部分用canvas进行了很多优化，保证前端的各种操作体验

3. 网站上线后的运维
   其实这个网站去年4月就上线了，不过当时个人的前端开发技术不够(其实现在也不行，本人是后端开发的，只是摸着石头过河吧，能实现功能就OK)，只把最简单的音频转码，去噪，提取背景音完成了，用最简单的form表单形式上线，经过一年的时间，后台观察还是有人用，但知道的人还是太少！平均每天就几十个人，说来惭愧。。。 所以又经过这一年的开发，把在web上的音频编辑参考了Audition和GoldWave的风格和操作体验，把最基本的一些编辑功能上线了； 其实可以做的还有很多很多，不过由于一个人开发，也是业余时间做，精力有限，所以把最基本的功能编辑上线了，也希望更多人知道，这毕竟是一个"纯国产的在线web音频编辑工具呀"！

4. 期望
   也不指望这个网站现在赚钱，因为也是业余开发，但这个网站的确也投入了很多时间和个人资金去运维，所以也很希望得到更多人的认可和使用，这样个人在后续功能的开发上也更有动力

最后再发一下网址吧，也希望更多与音频工作有关的朋友能使用，如果体验好就多推荐给相关的朋友，如果体验不好的地方和bug, 当然强烈的需求也可以给反馈到我个人邮箱

网址: www.xaudiopro.com
联系邮箱: luolongzhi@gmail.com

[JavaCS3]

没开源么？
另外就是音频编辑本来就比较专业，普通用户根本不理解，感觉用户群会比较小。而且我觉得专业用户应该会更偏好于专业和成熟的软件。毕竟音轨一多前端性能就跟不上了。
就好比PS和美图秀秀的关系。大部分人是搞不来了什么抠图调色什么的，所以有用现成的滤镜模板让用户直接选它想要的样式比较好，高级用户再去玩拉曲线吧。
我觉得可以专注于一些小的点比较好，比如去除背景噪音什么的，实时字幕等，可能结合现在直播和自媒体的需求会受众广一点。
不过能做出来很不错了！

[luolongzhi]

@JavaCS3 是的，多谢你的意见！

这个的确就是用户群不大，另外熟悉音频的人也不是特别多，所以才想慢慢养起来，主要做其它的不是我擅长，业务相关的写出来了就分分钟被别人秒了，只有这个才不怕被抄， 所以用户少也只能做这个，尽量垂直深耕吧。

你说的编辑方面的，音轨的话，如果用web我估计20轨以内应该就够用了，性能优化一下应该问题不大，不过多音轨要开发的确工作量还是比较大，这个目前还没计划，主要看有那么多用户支撑不，目前还是想现有功能让需要这个产品的人更多地知道，一直开发，没看到用户，写起来没啥动力呀，呵呵。。
另外，也提供了傻瓜化的一键操作的，希望拉低一些使用曲线， 尽量吸引一些喜欢便携化使用的用户吧；

很感谢你的留言，也算对我所做东西的一些认可和反馈，也很希望更多地听大家的意见和建议，也算是我继续开发的动力吧！

[ofshellohicy]

一个后端WEB做成这样可以了，我觉得很OK

[lzm0x219]

挺强的。 via Newton Mail [https://cloudmagic.com/k/d/mailapp?ct=dx&cv=10.0.32&pv=10.15.3&source=email_footer_2] On Fri, Apr 3, 2020 at 5:24 PM, Jiawei Yang <notifications@github.com> wrote: 一个后端WEB做成这样可以了，我觉得很OK — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub [#1153 (comment)] , or unsubscribe [https://github.com/notifications/unsubscribe-auth/AMAUEE6Q5FWVDVLYGCLEI2DRKWTLZANCNFSM4LVPODBQ] .

[Lionad-Morotar]

加油哇，Mark 一下。
我是一个吉他新手，这有一些我弹吉他录制音频时会用到的流程，可供参考：

1. 导入多个录制的文件，粗剪成一个文件A
2. 根据导入的噪音文件，在某种波段下对A进行降噪
3. 编辑A的频谱频率图形，修复一些瑕疵的音色
4. 复制A两份为B、C，将A、B、C添加至多轨M
5. 给B文件调整EQ，添加（某种）混响效果
6. 给C调整EQ，添加立体声效果
7. 回到多轨M平衡各文件音量，将M混成文件P
8. 对P进行动态处理，音量限幅
9. 将P输出无损wav和压缩后的mp3两种格式

[luolongzhi]

加油哇，Mark 一下。
我是一个吉他新手，这有一些我弹吉他录制音频时会用到的流程，可供参考：

1. 导入多个录制的文件，粗剪成一个文件A
2. 根据导入的噪音文件，在某种波段下对A进行降噪
3. 编辑A的频谱频率图形，修复一些瑕疵的音色
4. 复制A两份为B、C，将A、B、C添加至多轨M
5. 给B文件调整EQ，添加（某种）混响效果
6. 给C调整EQ，添加立体声效果
7. 回到多轨M平衡各文件音量，将M混成文件P
8. 对P进行动态处理，音量限幅
9. 将P输出无损wav和压缩后的mp3两种格式

很受用！ 很感谢意见！ 后面的开发会考虑这些情况和操作流程！
也在考虑进行多轨的开发，不过工作量有点大，你这个流程我在看在单轨上先实行多音频块的剪辑试一下!

[luolongzhi]

一个后端WEB做成这样可以了，我觉得很OK

多谢鼓励！后面会继续开发新功能，欢迎持续关注，也希望推荐给有音频需要的朋友！

[dirkarnez]

@luolongzhi 厉害...... 我也点赞一下。

[JavaCS3]

B站现在都有在线视频剪辑了，https://bilibili.clipchamp.com/

[YitingOU]

很棒啊，加个微信交流一下，可能有机会可以一起将这件事加快放大，wechat：yiting_ou

[lenewing3]

很牛逼的工具,叹为观止.

[EchoZhaoH]

niubility

[bigshans]

B站现在都有在线视频剪辑了，https://bilibili.clipchamp.com/

但不支持 Firefox 。