c0debreaker/audio-analyser.js

## audio-analyser.js
<!doctype html>
<html>

<head>
  <title> Learn to Code Securely – Code Example </title>
  <style>
  div#mp3_player {
    width: 500px;
    height: 60px;
    background: #000;
    padding: 5px;
    margin: 50px auto;
  }

  div#mp3_player > div > audio {
    width: 500px;
    background: #000;
    float: left;
  }

  div#mp3_player > canvas {
    width: 500px;
    height: 30px;
    background: #002D3C;
    float: left;
  }
  </style>

  <script>

  // Create a new instance of an audio object and adjust some of its properties
  var audio = new Audio();
  audio.src = 'song.mp3'; // Download any mp3 file and change this line to reflect the new filename
  audio.controls = true;
  audio.loop = true;
  audio.autoplay = true;

  // Establish all variables that your Analyser will use
  var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

  // Initialize the MP3 player after the page loads all of its HTML into the window
  window.addEventListener('load', initMp3Player, false);

  function initMp3Player() {
      document.getElementById('audio_box').appendChild(audio);
      context = new webkitAudioContext(); // AudioContext object instance
      analyser = context.createAnalyser(); // AnalyserNode method
      canvas = document.getElementById('analyser_render');
      ctx = canvas.getContext('2d');
      // Re-route audio playback into the processing graph of the AudioContext
      source = context.createMediaElementSource(audio);
      source.connect(analyser);
      analyser.connect(context.destination);
      frameLooper();
  }

  // frameLooper() animates any style of graphics you wish to the audio frequency
  // Looping at the default frame rate that the browser provides(approx. 60 FPS)
  function frameLooper() {
    window.webkitRequestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = '#00CCFF'; // Color of the bars
    bars = 100;
    for (var i = 0; i < bars; i++) {
      bar_x = i * 3;
      bar_width = 2;
      bar_height = -(fbc_array[i] / 2);
      ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
  }
  </script>
</head>

<body>
<h3>From: Hacking News & Tutorials</h3>
  <div id="mp3_player">
    <div id="audio_box"></div>
    <canvas id="analyser_render"></canvas>
  </div>
</body>
</html>
	<!doctype html>
	<html>

	<head>
	<title> Learn to Code Securely – Code Example </title>
	<style>
	div#mp3_player {
	width: 500px;
	height: 60px;
	background: #000;
	padding: 5px;
	margin: 50px auto;
	}

	div#mp3_player > div > audio {
	width: 500px;
	background: #000;
	float: left;
	}

	div#mp3_player > canvas {
	width: 500px;
	height: 30px;
	background: #002D3C;
	float: left;
	}
	</style>

	<script>

	// Create a new instance of an audio object and adjust some of its properties
	var audio = new Audio();
	audio.src = 'song.mp3'; // Download any mp3 file and change this line to reflect the new filename
	audio.controls = true;
	audio.loop = true;
	audio.autoplay = true;

	// Establish all variables that your Analyser will use
	var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

	// Initialize the MP3 player after the page loads all of its HTML into the window
	window.addEventListener('load', initMp3Player, false);

	function initMp3Player() {
	document.getElementById('audio_box').appendChild(audio);
	context = new webkitAudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById('analyser_render');
	ctx = canvas.getContext('2d');
	// Re-route audio playback into the processing graph of the AudioContext
	source = context.createMediaElementSource(audio);
	source.connect(analyser);
	analyser.connect(context.destination);
	frameLooper();
	}

	// frameLooper() animates any style of graphics you wish to the audio frequency
	// Looping at the default frame rate that the browser provides(approx. 60 FPS)
	function frameLooper() {
	window.webkitRequestAnimationFrame(frameLooper);
	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	ctx.fillStyle = '#00CCFF'; // Color of the bars
	bars = 100;
	for (var i = 0; i < bars; i++) {
	bar_x = i * 3;
	bar_width = 2;
	bar_height = -(fbc_array[i] / 2);
	ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
	}
	</script>
	</head>

	<body>
	<h3>From: Hacking News & Tutorials</h3>
	<div id="mp3_player">
	<div id="audio_box"></div>
	<canvas id="analyser_render"></canvas>
	</div>
	</body>
	</html>