JS纯前端实现audio音频剪裁剪切复制播放与上传
背景是这样的，用户上传音频文件，可能只需要几十秒就够了，但是常规的音乐都要3~5分钟，80%的流量都是不需要的，要是就这么传上去，其实是流量的浪费，如果可以在前端就进行剪裁，也就是只取前面一段时间的音频，岂不是可以给公司省很多流量费用，前端的业务价值就体现了。
关键如何实现呢？
下面，就以“截取用户上传音频前3秒内容”的需求示意下如何借助Web Audio API实现音频的部分复制与播放功能。
1. File对象转ArrayBuffer
在Web网页中，用户选择的文件是个file对象，我们可以将这个文件对象转换成Blob、ArrayBuffer或者Base64。
在音频处理这里，都是使用ArrayBuffer这个数据类型。
代码如下所示，假设file类型的文件选择框的id是'file'。
使用的是readAsArrayBuffer()方法，无论是MP3格式、OGG格式还是WAV格式，都可以转换成ArrayBuffer类型。
2. ArrayBuffer转AudioBuffer
这里的ArrayBuffer相对于把音频文件数组化了，大家可以理解为把音频文件分解成一段一段的，塞进了一个一个有地址的小屋子里，在计算机领域称为“缓冲区”，就是单词Buffer的意思。
所谓音频的剪裁，其实就是希望可以复制音频前面一段时间的内容。
但是问题来了，ArrayBuffer里面的数据并没有分类，统一分解了，想要准确提取某一截音频数据，提取不出来。
所以，才需要转换成AudioBuffer，纯粹的音频数据，方便提取。
AudioBuffer是一个仅仅包含音频数据的数据对象，是Web Audio API中的一个概念。
既然说到了Web Audio API，那我们就顺便……顺便……，想了想，还是不展开，因为太庞杂了，这Web Audio API至少比Web Animation API复杂了10倍，API之多，体量之大，世间罕见，想要完全吃透了，没有三年五载，啃不下来。
如果大家不是想要立志成为音视频处理专家，仅仅是临时解决一点小毛小病的问题，则不必深入，否则脑坑疼，使用MDN文档中的一些案例东拼西凑，基本的效果也能弄出来。
扯远了，回到这里。
AudioBuffer大家可以理解为音乐数据，那为什么叫AudioBuffer，不叫AudioData呢？
因为Buffer是个专有名词，直译为缓冲区，大家可以理解为高速公路，AudioBuffer处理数据更快，而且还有很多延伸的API，就像是高速公路上的服务区，有吃有喝还有加油的地方。
AudioData一看名字就是乡下土鳖，虽然接地气，但是，处理好几兆的数据的时候，就有些带不动了，就好像骑小电驴，在公速公路和乡道县道没多大区别，但是如果是开跑车，啧啧，乡下路就带不动了。
3. 复制AudioBuffer前3秒数据
AudioBuffer对象是一个音频专用Buffer对象，包含很多音频信息，包括：
音频时长 duration
声道数量 numberOfChannels
采样率 sampleRate
等。
包括一些音频声道数据处理方法，例如：
获取通道数据 getChannelData()
复制通道数据 copyFromChannel()
写入通道数据 copyToChannel()
