通过Web Audio Api展示音频整体波形（整体波形，而非实时）

    在做这个功能时并未对音频过多了解，因为H5的audio标签已经很强大了，但是因为这次需要对音频的波形进行展示，于是开始查看文档及相关技术贴，发现无论是官网推荐还是大部分的帖子推荐的做法都是使用Audio Api的AnalyserNode，但是AnalyserNode的问题是他只能用来做实时波形展示，与需求不符，不过如果公司对插件没要求的话，强烈推荐wavesurfer.js库，相当简单，做音频可视化非常棒，但是因为是公司产品，还是尽可能自己实现了。
    相关步骤如下：

1. ajax获取音频文件ArrayBuffer后再对其进行解码，实例化一个audioContext对象。
2. 调用audioContext.decodeAudioData方法对arrayBuffer数据进行解码，获得AudioBuffer对象。
3. 提取音频数据采样，获取峰值，便于展示及分析。
4. 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(buffer, perSecPx);


		//	销毁audioContext 和 source 对象，因为前端是使用audio标签播放的
        //  audio标签能满足大部分需求，Web Audio Api控制起来真的很不简单。
        //  如果不销毁audioContext对象的话，audio标签是无法播放的
		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 = 441
		const 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源码中借鉴的一部分，不过因为对声道要求不高，所以简化了一些操作。