如何制作一个纯前端的音频剪辑工具并部署到github的pages页面

展示

成品： https://liu-shichao.github.io/audio-cutter/
源码：https://github.com/liu-shichao/audio-cutter

功能：将一段 wav 的音频剪切成多段同样格式参数的 wav 音频。
优势：跨平台（只要有谷歌浏览器就行），纯前端实现数据保密安全，不用担心上传服务器。

原理

1.通过 wavesurfer.js 这个库显示声音的波形文件，并实现要截取片段的交互功能。
2.浏览器现在支持 WebAssembly（wasm）功能，能将 c / c++ 编写的代码编译成二进制，让浏览器来执行，有人将 ffmpeg 编译成了浏览器能调用的版本，这里就可以纯前端进行音视频操作了。
3.将剪辑的片段自动进行下载。

原因

训练语音分类模型的时候，为了准备不同的关键词声音文件，每个关键词的语音需要录制多个不同的文件，为了省事我把多段相同的语音录制到了同一个文件，然后对文件进行分割，于是做了这个工具

需求

1. 需要能显示波形，这样才能看见哪段有声音哪段没有声音
2. 能够指定要分割的位置
3. 最好跨平台

经过

1. 因为要跨平台，而且是个简单的工具软件，初步确定了制作网页版本的。
2. 因为极度缺乏网页开发的经验，从网上东拼西凑搞了好多代码，算是攒出来一个
3. 本地调试好后部署到了github的Pages服务上，免费好用，纯前端的应用完全足够

致谢

感谢各路大佬的分享，我才能东拼西凑搞出我想用的工具

备注

这个工具目前就是我自己用的，所以通用性不强，各路大佬可以根据这个源码自己修改自己的功能。

参考

1.https://www.stackhawk.com/blog/typescript-cors-guide-what-it-is-and-how-to-enable-it/
2.https://github.com/orgs/community/discussions/13309
3.https://juejin.cn/post/7005745169123246117?from=search-suggest
4.https://www.zhangxinxu.com/wordpress/2018/12/wavesurfer-js-mp3-audio-wave/