关于根据webaudio绘制波形图遇到的一些坑

因业务需要，根据音频文件绘制音频的波形图。

网上有不少相关的demo，不过多是实时获取音频的频率进行绘制的，想要获取音频所有的波形图苦寻了很久，终于找到了。

let ac = new(window.AudioContext || window.webkitAudioContext)();
//兼容写法  定义变量ac为audiocontext对象
let url = '1.wav';
//音频的路径，可以是同源文件，也可以是网络上的的音频文件地址
xhr.open("GET", url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
    let arraybuffer = xhr.response;
    ac.decodeAudioData(arraybuffer, function(buffer) {
		let source = ac.createBufferSource();
		let data = buffer.getChannelData(0);
        //获取到的音频数据式是数组
		console.log(data);
		source.buffer = buffer;
		source.connect(ac.destination);
		console.log(source);
		console.log(ac)
		source.start(0);
	})
}
xhr.send();

自己写的一部分，刚刚得到了目标数据，接下来是根据数据绘制canvas了，