bsh314/Audio Spectrum-Analyser-In-URL-Hash.html

## Audio Spectrum-Analyser-In-URL-Hash.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Url Spectrum</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script>
      const chars = ["⡀", "⢠", "⢰", "⢸"];
      window.onload = function() {
        var file = document.getElementById("thefile");
        var audio = document.getElementById("audio");

        let spectrum = [];

        file.onchange = function() {
          var files = this.files;
          audio.src = URL.createObjectURL(files[0]);
          audio.load();
          audio.play();
          var context = new AudioContext();
          var src = context.createMediaElementSource(audio);
          var analyser = context.createAnalyser();

          var canvas = document.getElementById("canvas");
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          var ctx = canvas.getContext("2d");

          src.connect(analyser);
          analyser.connect(context.destination);

          analyser.fftSize = 32;
          var bufferLength = analyser.frequencyBinCount;

          var dataArray = new Uint8Array(bufferLength);

          var WIDTH = canvas.width;
          var HEIGHT = canvas.height;

          var barWidth = (WIDTH / bufferLength) * 2.5;
          var barHeight;
          var x = 0;

          function renderFrame() {
            requestAnimationFrame(renderFrame);

            x = 0;

            analyser.getByteFrequencyData(dataArray);

            ctx.fillStyle = "#000";
            ctx.fillRect(0, 0, WIDTH, HEIGHT);

            spectrum = [];

            for (var i = 0; i < bufferLength; i++) {
              barHeight = dataArray[i];
              spectrum.push(chars[Math.floor(barHeight/64)]);

              var r = barHeight + 25 * (i / bufferLength);
              var g = 250 * (i / bufferLength);
              var b = 50;

              ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
              ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

              x += barWidth + 1;
            }
            location.hash = spectrum.join('');
          }

          audio.play();
          renderFrame();
        };
      };
    </script>
    <style>
      #thefile {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 100;
      }

      #canvas {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }

      audio {
        position: fixed;
        left: 10px;
        bottom: 10px;
        width: calc(100% - 20px);
      }
    </style>
  </head>
  <body>
    <div id="content">
      <input type="file" id="thefile" accept="audio/*" />
      <canvas id="canvas"></canvas>
      <audio id="audio" controls></audio>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Url Spectrum</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	<script>
	const chars = ["⡀", "⢠", "⢰", "⢸"];
	window.onload = function() {
	var file = document.getElementById("thefile");
	var audio = document.getElementById("audio");

	let spectrum = [];

	file.onchange = function() {
	var files = this.files;
	audio.src = URL.createObjectURL(files[0]);
	audio.load();
	audio.play();
	var context = new AudioContext();
	var src = context.createMediaElementSource(audio);
	var analyser = context.createAnalyser();

	var canvas = document.getElementById("canvas");
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var ctx = canvas.getContext("2d");

	src.connect(analyser);
	analyser.connect(context.destination);

	analyser.fftSize = 32;
	var bufferLength = analyser.frequencyBinCount;

	var dataArray = new Uint8Array(bufferLength);

	var WIDTH = canvas.width;
	var HEIGHT = canvas.height;

	var barWidth = (WIDTH / bufferLength) * 2.5;
	var barHeight;
	var x = 0;

	function renderFrame() {
	requestAnimationFrame(renderFrame);

	x = 0;

	analyser.getByteFrequencyData(dataArray);

	ctx.fillStyle = "#000";
	ctx.fillRect(0, 0, WIDTH, HEIGHT);

	spectrum = [];

	for (var i = 0; i < bufferLength; i++) {
	barHeight = dataArray[i];
	spectrum.push(chars[Math.floor(barHeight/64)]);

	var r = barHeight + 25 * (i / bufferLength);
	var g = 250 * (i / bufferLength);
	var b = 50;

	ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
	ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

	x += barWidth + 1;
	}
	location.hash = spectrum.join('');
	}

	audio.play();
	renderFrame();
	};
	};
	</script>
	<style>
	#thefile {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100;
	}

	#canvas {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	}

	audio {
	position: fixed;
	left: 10px;
	bottom: 10px;
	width: calc(100% - 20px);
	}
	</style>
	</head>
	<body>
	<div id="content">
	<input type="file" id="thefile" accept="audio/*" />
	<canvas id="canvas"></canvas>
	<audio id="audio" controls></audio>
	</div>
	</body>
	</html>