window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext; window.onload = function() { var audio = document.getElementById('aud'); var ctx = new AudioContext(); var analyser = ctx.createAnalyser(); var audioSrc = ctx.createMediaElementSource(aud); audioSrc.connect(analyser); analyser.connect(ctx.destination); var frequencyData = new Uint8Array(analyser.frequencyBinCount); var canvas = document.getElementById('canv'), cwidth = canvas.width, cheight = canvas.height - 2, meterWidth =10, gap = 2, capHeight = 2, capStyle = '#fff', meterNum = 800 / (2+ 2), capYPositionArray = []; ctx = canvas.getContext('2d'), gradient = ctx.createLinearGradient(0, 22, 0, 300); gradient.addColorStop(1, '#ffff00'); gradient.addColorStop(0.6, '#cc00cc'); gradient.addColorStop(0, '#3366ff'); function renderFrame() { var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); var step = Math.round(array.length / meterNum); ctx.clearRect(0, 0, cwidth, cheight); for (var i = 0; i < meterNum; i++) { var value = array[i * step]; if (capYPositionArray.length < Math.round(meterNum)) { capYPositionArray.push(value); }; ctx.fillStyle = capStyle; if (value < capYPositionArray[i]) { ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight); } else { ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight); capYPositionArray[i] = value; }; ctx.fillStyle = gradient; ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); } requestAnimationFrame(renderFrame); } renderFrame(); };