ricardobeat/body.html

## body.html
<body>
  <div id="container">
    <canvas height="200" width="500" id="fft"></canvas>
    <audio id="audio" src="IO2010.mp3" preload controls></audio>
  </div>
  <script>
  // requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function(callback, element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
  </script>
  <script>
    // Some Javascript
  </script>
</body>

## filter.html
<p>LowPass: <input id="lowpass" type="range" value="5000" min="0" max="5000" step="10"></p>

<script>
function init() {
  source = audioContext.createMediaElementSource(audioElement);
  gain = audioContext.createGainNode();
  filter = audioContext.createLowPass2Filter();
  filter.cutoff.value = 22050;
  analyser = audioContext.createAnalyser();
  source.connect(gain);
  gain.connect(filter);
  filter.connect(analyser);
  analyser.connect(audioContext.destination);
  draw();
}


document.getElementById("lowpass").addEventListener('change',
  function(e){
    filter.cutoff.value = this.value
});


</script>

## gain.html
<p>Gain: <input id="gain" type="range" value="1" min="0" max="1" step="0.01"></p>

## gain_create.js
source = audioContext.createMediaElementSource(audioElement);
gain = audioContext.createGainNode();
analyser = audioContext.createAnalyser();

source.connect(gain);
gain.connect(analyser);
analyser.connect(audioContext.destination);

## gain_listener.js
document.getElementById("gain").addEventListener('change',
  function(e){
  gain.gain.value = this.value
});

## gradient.js
gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)");
gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)");
gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)");
gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)");
gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)");
gradient.addColorStop(1, "rgba(255, 0, 0, 1)");

ctx.fillStyle = gradient;

## main.js
// The audio element
audioElement = document.getElementById('audio');

// The canvas, its context and fillstyle
canvas = document.getElementById('fft');
ctx = canvas.getContext('2d');
ctx.fillStyle = "white";

// Create new Audio Context and an audio analyzer
audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();

// Canvas' height and width
CANVAS_HEIGHT = canvas.height;
CANVAS_WIDTH = canvas.width;
// We'll need the offset later
OFFSET = 100;
// Spacing between the individual bars
SPACING = 10;
// Initialize and start drawing
// when the audio starts playing
window.onload = init;
audioElement.addEventListener('play', draw);

function init() {
  // Take input from audioElement
  source = audioContext.createMediaElementSource(audioElement);
  // Connect the stream to an analyzer
  source.connect(analyser);
  // Connect the analyzer to the speakers
  analyser.connect(audioContext.destination);
  // Start the animation
  draw();
}

function draw() {
  // See http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  requestAnimFrame(draw, canvas);
  // New typed array for the raw frequency data
  freqData = new Uint8Array(analyser.frequencyBinCount);
  // Put the raw frequency into the newly created array
  analyser.getByteFrequencyData(freqData);
  // Clear the canvas
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  // This loop draws all the bars
  for (var i = 0; i < freqData.length - OFFSET; i++) {
    // Work out the hight of the current bar
    // by getting the current frequency
    var magnitude = freqData[i + OFFSET];
    // Draw a bar from the bottom up (cause for the "-magnitude")
    ctx.fillRect(i * SPACING, CANVAS_HEIGHT, SPACING / 2, -magnitude);
  };
}
	<body>
	<div id="container">
	<canvas height="200" width="500" id="fft"></canvas>
	<audio id="audio" src="IO2010.mp3" preload controls></audio>
	</div>
	<script>
	// requestAnim shim layer by Paul Irish
	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback, element){
	window.setTimeout(callback, 1000 / 60);
	};
	})();
	</script>
	<script>
	// Some Javascript
	</script>
	</body>
	<p>LowPass: <input id="lowpass" type="range" value="5000" min="0" max="5000" step="10"></p>

	<script>
	function init() {
	source = audioContext.createMediaElementSource(audioElement);
	gain = audioContext.createGainNode();
	filter = audioContext.createLowPass2Filter();
	filter.cutoff.value = 22050;
	analyser = audioContext.createAnalyser();
	source.connect(gain);
	gain.connect(filter);
	filter.connect(analyser);
	analyser.connect(audioContext.destination);
	draw();
	}


	document.getElementById("lowpass").addEventListener('change',
	function(e){
	filter.cutoff.value = this.value
	});


	</script>
	document.getElementById("gain").addEventListener('change',
	function(e){
	gain.gain.value = this.value
	});
	gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);

	gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
	gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)");
	gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)");
	gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)");
	gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)");
	gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)");
	gradient.addColorStop(1, "rgba(255, 0, 0, 1)");

	ctx.fillStyle = gradient;
	// The audio element
	audioElement = document.getElementById('audio');

	// The canvas, its context and fillstyle
	canvas = document.getElementById('fft');
	ctx = canvas.getContext('2d');
	ctx.fillStyle = "white";

	// Create new Audio Context and an audio analyzer
	audioContext = new webkitAudioContext();
	analyser = audioContext.createAnalyser();

	// Canvas' height and width
	CANVAS_HEIGHT = canvas.height;
	CANVAS_WIDTH = canvas.width;
	// We'll need the offset later
	OFFSET = 100;
	// Spacing between the individual bars
	SPACING = 10;
	// Initialize and start drawing
	// when the audio starts playing
	window.onload = init;
	audioElement.addEventListener('play', draw);

	function init() {
	// Take input from audioElement
	source = audioContext.createMediaElementSource(audioElement);
	// Connect the stream to an analyzer
	source.connect(analyser);
	// Connect the analyzer to the speakers
	analyser.connect(audioContext.destination);
	// Start the animation
	draw();
	}

	function draw() {
	// See http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	requestAnimFrame(draw, canvas);
	// New typed array for the raw frequency data
	freqData = new Uint8Array(analyser.frequencyBinCount);
	// Put the raw frequency into the newly created array
	analyser.getByteFrequencyData(freqData);
	// Clear the canvas
	ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
	// This loop draws all the bars
	for (var i = 0; i < freqData.length - OFFSET; i++) {
	// Work out the hight of the current bar
	// by getting the current frequency
	var magnitude = freqData[i + OFFSET];
	// Draw a bar from the bottom up (cause for the "-magnitude")
	ctx.fillRect(i * SPACING, CANVAS_HEIGHT, SPACING / 2, -magnitude);
	};
	}