前端音波绘制

好久不曾写博客了，忙忙碌碌大半年，毕业就工作果然还是有点意思。本人贼懒，但是只要是研究了点东西的话，还是分享一下供其他感兴趣的小伙伴前车之鉴吧。回归正题，用过手机百度音乐的朋友们（这里算打个广告吧）估计会注意音乐播放后左下角那个音波绘制的看起来蛮舒服的，于是乎我们要自己动手做一个！[插入]

首先还是先得到所绘制音波在不同时刻的振幅，这个直接上AudioContext好了，这个不是本文的重点，所以直接上代码：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();
var audio = document.querySelector('#audio');
audio.onplay = function(){
      source = audioCtx.createMediaElementSource(audio);
      source.connect(analyser);
      analyser.connect(distortion);
      distortion.connect(biquadFilter);
      biquadFilter.connect(gainNode);
      gainNode.connect(audioCtx.destination);
      analyser.fftSize = 2048;
      var bufferLength = analyser.frequencyBinCount;
      var dataArray = new Uint8Array(bufferLength);
      analyser.getByteTimeDomainData(dataArray);
}

这样dataArray这个数组中就装就是我们所需要的，不过考虑到我们要实现的效果，只是在需要的时候得到对应的振幅，因此我们每次使用getByteTimeDomainData的时候只需要一个一维数组即可。

有了波动的数据下面开始绘制（基本的绘制效果可参考这里），这里一开始我以为正弦波就能搞定，于是乎有了下面这个第一版。但是波峰与波谷连接处的拐点却是十分明显，显然这个是不符合预期的，于是乎，只好上万能bezier曲线了。