好久不曾写博客了,忙忙碌碌大半年,毕业就工作果然还是有点意思。本人贼懒,但是只要是研究了点东西的话,还是分享一下供其他感兴趣的小伙伴前车之鉴吧。回归正题,用过手机百度音乐的朋友们(这里算打个广告吧)估计会注意音乐播放后左下角那个音波绘制的看起来蛮舒服的,于是乎我们要自己动手做一个![插入]
首先还是先得到所绘制音波在不同时刻的振幅,这个直接上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曲线了。