var AudioContext = AudioContext || webkitAudioContext; var context = new AudioContext(); var analyser = context.createAnalyser(); analyser.fftSize = 256; analyser.smoothingTimeConstant = .75; var frequencyData = new Uint8Array( analyser.fftSize ); //analyser.connect( context.destination ); var canvas = document.createElement( 'canvas' ), ctx = canvas.getContext( '2d' ); canvas.width = 1024; canvas.height = 256; canvas.style.border = '1px solid #666' document.body.appendChild( canvas ); var mediaStreamSource; navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ); navigator.getUserMedia( { audio: true }, function( stream ) { mediaStreamSource = context.createMediaStreamSource( stream ); mediaStreamSource.connect( analyser ); }, function( e ) { console.log( 'getUserMedia ' + e ) } ); function update() { requestAnimationFrame( update ); analyser.getByteFrequencyData( frequencyData ); ctx.clearRect( 0, 0, canvas.width, canvas.height ); for( var j = 0, m = analyser.frequencyBinCount; j < m; j++ ) { ctx.fillRect( j * ( canvas.width / m ), canvas.height, .5 * canvas.width / m, - frequencyData[ j ] * canvas.height / 255 ); } } update();