A waterfall-style spectrum display. It should be displaying whatever your computer's microphone is "hearing".
13 |The source is on Github.
14 | 15 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /waterfall.js: -------------------------------------------------------------------------------- 1 | (function(window, document, undefined) { 2 | 3 | var waterfall = function(settings) { 4 | 5 | var id = settings.id || 'waterfall'; 6 | var width = settings.width || 1024; 7 | var height = settings.height || 200; 8 | var foreground = "rgba(255, 255, 255, 1)"; 9 | var background = "rgba(0, 0, 0, 1)"; 10 | 11 | var audioStream = settings.stream; 12 | var audioContext = settings.context; 13 | 14 | var target = document.getElementById(id); 15 | var canvas = document.createElement('canvas'); 16 | canvas.width = width; 17 | canvas.height = height; 18 | target.appendChild(canvas); 19 | var canvasContext = canvas.getContext('2d'); 20 | 21 | canvasContext.fillStyle = background; 22 | canvasContext.fillRect(0, 0, width, height); 23 | 24 | var analyser = audioContext.createAnalyser(); 25 | audioStream.connect(analyser); 26 | 27 | var moveBy = 1; 28 | function draw() { 29 | window.requestAnimationFrame(draw); 30 | 31 | frequencies = new Uint8Array(analyser.frequencyBinCount); 32 | analyser.getByteFrequencyData(frequencies); 33 | // canvasContext.clearRect(0, 0, width, height); 34 | 35 | canvasContext.drawImage(canvasContext.canvas, 0, 0, width, height - moveBy, 0, moveBy, width, height - moveBy); 36 | 37 | for (var i = 0; i < frequencies.length; i++) { 38 | var mag = frequencies[i]; 39 | canvasContext.fillStyle = "rgba(" + mag + "," + mag + "," + mag + ", 1)"; 40 | canvasContext.fillRect(i, 0, 1, moveBy); 41 | } 42 | } 43 | 44 | draw(); 45 | }; 46 | 47 | window.Waterfall = waterfall; 48 | }(window,document)); 49 | --------------------------------------------------------------------------------