如何用JavaScript实现音频的裁剪、复制、播放和上传功能？

本文共计2077个文字，预计阅读时间需要9分钟。

背景是这样的，用户上传音频文件，可能只需要几十秒就足够了。但常规的音频通常有3到5分钟，80%的流量都是不必要的。实际上，就是需要在前端就进行剪切。

背景是这样的，用户上传音频文件，可能只需要几十秒就够了，但是常规的音乐都要3~5分钟，80%的流量都是不需要的，要是就这么传上去，其实是流量的浪费，如果可以在前端就进行剪裁，也就是只取前面一段时间的音频，岂不是可以给公司省很多流量费用，前端的业务价值就体现了。

关键如何实现呢？

下面，就以“截取用户上传音频前3秒内容”的需求示意下如何借助Web Audio API实现音频的部分复制与播放功能。

一、不哔哔，直接正题

实现步骤如下。

1. File对象转ArrayBuffer

在Web网页中，用户选择的文件是个file对象，我们可以将这个文件对象转换成Blob、ArrayBuffer或者Base64。

在音频处理这里，都是使用ArrayBuffer这个数据类型。

代码如下所示，假设file类型的文件选择框的id是 'file' 。