在做这个功能时并未对音频过多了解，因为H5的audio标签已经很强大了，但是因为这次需要对音频的波形进行展示，于是开始查看文档及相关技术贴，发现无论是官网推荐还是大部分的帖子推荐的做法都是使用Audio Api的AnalyserNode，但是AnalyserNode的问题是他只能用来做实时波形展示，与需求不符，不过如果公司对插件没要求的话，强烈推荐wavesurfer.js库，相当简单，做音频可视化非常棒，但是因为是公司产品，还是尽可能自己实现了。
相关步骤如下：
- ajax获取音频文件ArrayBuffer后再对其进行解码，实例化一个audioContext对象。
- 调用audioContext.decodeAudioData方法对arrayBuffer数据进行解码，获得AudioBuffer对象。
- 提取音频数据采样，获取峰值，便于展示及分析。
- canvas或者svg渲染采样数据，绘制波形。
下面是我整理的一个例子：
// 创建音频对象
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let source = audioContext.createBufferSource();
//请求资源
const request = new XMLHttpRequest();
request.open('GET','audioUrl', true);
request.responseType = 'arraybuffer';
request.onload = function () {const audioData = request.response; // audioData为 arrayBuffer 类型数据//使用web audio api解码audioContext.decodeAudioData(audioData, function (buffer) {// 每秒绘制100个点，就是将每秒44100个点分成100份，// 每一份算出最大值和最小值来代表每10毫秒内的波峰和波谷// const perSecPx = 100;const perSecPx = 1;// 获取所有波峰波谷，peaks 即为最后所需波形数据const peaks = getPeaks(buff, perSecPx);// 销毁audioContext 和 source 对象，因为前端是使用audio标签播放的，audio标签能满足大部分需求，Web Audio Api控制起来真的很不简单。source = null;audioContext = null;}, function (e) { "Error with decoding audio data" + e.err });
};
request.send();getPeaks(buffer, perSecPx) {const { numberOfChannels, sampleRate, length } = buffer;// 每一份的点数=44100 / 100 = 441const sampleSize = ~~(sampleRate / perSecPx);const first = 0;const last = ~~(length / sampleSize)const peaks = [];const chan = buffer.getChannelData(0);for (let i = first; i <= last; i++) {const start = i * sampleSize;const end = start + sampleSize;let min = 0;let max = 0;for (let j = start; j < end; j++) {const value = chan[j];if (value > max) {max = value;}if (value < min) {min = value;}}// 波峰peaks[2 * i] = max;// 波谷peaks[2 * i + 1] = min;}return peaks;}
怎么使用jquery.ajax获取数据可以看我上一篇博客，获取到的peaks就是采样之后的音频数据集合，怎么渲染出来就看自身需求了，不过公司如果没有对库有太多要求的话，真心建议使用wavesurfer.js库，我这个案例中的getPeaks也是从wavesurfer源码中借鉴的一部分，不过因为对声道要求不高，所以简化了一些操作。