LeetCodes/index.html

## index.html
<html >
<head>
  <meta charset="UTF-8">
  <title>Responsive HTML5 Audio Spectrum EQ Player</title>
  <script type="text/javascript">

        var audio = new Audio();
        audio.src = "https://s3.us-east-2.amazonaws.com/leetcodes/assets/My_House_-_Flo_Rida_Jack_Dyer_Bootleg.mp3";
    audio.crossOrigin = "anonymous";
        audio.controls = false;
        audio.loop = false;
        audio.autoplay = true;
    </script>

</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

## responsive-html5-audio-spectrum-eq-player.markdown

      
    Raw
  

              responsive-html5-audio-spectrum-eq-player.markdown
            
          
    Responsive HTML5 Audio Spectrum EQ Player

New HTTPS security changes from CodePen and Firefox/Chrome prevents my MP3 file from playing.  I have a working version here:  http://hardcoreloops.com/demo/html5-audio-spectrum-eq-player.html
Old HTML5 code I found that can is responsive in design.  It uses the HTML5 Audio tag and displays a beautiful light blue Spectrum EQ analyzer, you change the color and put any kind of wallpaper/background of your choice.
Can't really remember where I found this one... I believe, I Forked it from the FrameLooper Google library or somewhere on StackOverflow.
A Pen by Leetcodes on CodePen.
License.

  
## script.js
var canvas,
  ctx,
  source,
  context,
  analyser,
  fbc_array,
  bars,
  bar_x,
  bar_width,
  bar_height;

window.addEventListener("load", initMp3Player, false);
function initMp3Player() {
  document.getElementById("audio_box").appendChild(audio);
  context = new AudioContext(); // AudioContext object instance
  analyser = context.createAnalyser(); // AnalyserNode method
  canvas = document.getElementById("analyser_render");
  ctx = canvas.getContext("2d");

  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}

function frameLooper() {
  window.RequestAnimationFrame =
    window.requestAnimationFrame(frameLooper) ||
    window.mozRequestAnimationFrame(frameLooper) ||
    window.webkitRequestAnimationFrame(frameLooper) ||
    window.msRequestAnimationFrame(frameLooper);

  fbc_array = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(fbc_array);
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
  ctx.fillStyle = "#663399"; // 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);
    //fillRect( x, y, width, height ) // Explanation of the parameters below
    ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
  }
}

## style.css
div#mp3_player {
    width:100%;
    height:auto;
    background:#000;


    }

div#mp3_player > div > audio {

    width:100%;
    background:#000;

    }


div#mp3_player > canvas {
    width:100%;
    height:auto;
    background-image:url(https://s3.us-east-2.amazonaws.com/leetcodes/assets/16bit-opium-field-morning.png);
    background-size:cover;
    background-repeat:no-repeat;
    margin:auto;
    }
	<html >
	<head>
	<meta charset="UTF-8">
	<title>Responsive HTML5 Audio Spectrum EQ Player</title>
	<script type="text/javascript">

	var audio = new Audio();
	audio.src = "https://s3.us-east-2.amazonaws.com/leetcodes/assets/My_House_-_Flo_Rida_Jack_Dyer_Bootleg.mp3";
	audio.crossOrigin = "anonymous";
	audio.controls = false;
	audio.loop = false;
	audio.autoplay = true;
	</script>

	</head>
	<body>
	<div id="mp3_player">
	<div id="audio_box"></div>
	<canvas id="analyser_render"></canvas>
	</div>
	</body>
	</html>
	var canvas,
	ctx,
	source,
	context,
	analyser,
	fbc_array,
	bars,
	bar_x,
	bar_width,
	bar_height;

	window.addEventListener("load", initMp3Player, false);
	function initMp3Player() {
	document.getElementById("audio_box").appendChild(audio);
	context = new AudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById("analyser_render");
	ctx = canvas.getContext("2d");

	source = context.createMediaElementSource(audio);
	source.connect(analyser);
	analyser.connect(context.destination);
	frameLooper();
	}

	function frameLooper() {
	window.RequestAnimationFrame =
	window.requestAnimationFrame(frameLooper) \|\|
	window.mozRequestAnimationFrame(frameLooper) \|\|
	window.webkitRequestAnimationFrame(frameLooper) \|\|
	window.msRequestAnimationFrame(frameLooper);

	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	ctx.fillStyle = "#663399"; // 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);
	//fillRect( x, y, width, height ) // Explanation of the parameters below
	ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
	}
	div#mp3_player {
	width:100%;
	height:auto;
	background:#000;


	}

	div#mp3_player > div > audio {

	width:100%;
	background:#000;

	}



	div#mp3_player > canvas {
	width:100%;
	height:auto;
	background-image:url(https://s3.us-east-2.amazonaws.com/leetcodes/assets/16bit-opium-field-morning.png);
	background-size:cover;
	background-repeat:no-repeat;
	margin:auto;
	}