timothycarambat/httpd-vhosts.conf

## httpd-vhosts.conf
## You need to host this folder on a webserver like NODE, NGINX, or Apache (I was using XAMPP on windows). You need to make the request for the
## song file to appear as though it comes from a http, https. Otherwise chrome wont allow you to play the file.
## After this is setup restart the server and go to localhost:8080. Then youre watching it play out
<VirtualHost *:8080>
    ServerName kmlviewer.test
    DocumentRoot "C:/xampp/htdocs/musiclookslike"
    <Directory "C:/xampp/htdocs/musiclookslike">
        AllowOverride All
        Order Allow,Deny
        Allow from all
    </Directory>
</VirtualHost>

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HACKATHON 1</title>
    </head>
    <body>
      <!-- You need to change this to a div. Something about user input loading audio on chrome -->
    <div id="audioElement">
    </div>

    <canvas id="canvas" width="1000" height="900"></canvas>
    <script type="text/javascript" src="assets/js/site.js"></script>
    </body>
</html>

## site.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

//modify the next two vars to changes canvas size. I wanted it smaller.
var gridRows = 64;
var gridColumns = 64;
var gridWidth = Math.floor(canvasWidth / gridRows);
var gridHeight = Math.floor(canvasWidth / gridColumns);

var strokeColor = 'rgb(219, 219, 219)';
//wanted a 60 second timeout.
var timeEnd = 60;

// draw tiles
function drawTiles() {
    for (var i = 0; i < gridRows; i++) {
        for (var j = 0; j < gridColumns; j++) {
            var x = j * gridWidth;
            var y = i * gridHeight;
            ctx.strokeStyle = strokeColor;
            ctx.strokeRect(x, y, gridWidth, gridHeight);
        }
    }
}

function drawBackground() {
    ctx.rect(0, 0, canvasWidth, canvasHeight);
    ctx.fillStyle = 'black';
    ctx.fill();
}

// drawBackground();
// drawTiles();


// Initialize the player
// chrome wont allow this to work unless started by user gesture.
window.addEventListener('click', initPlayer, false);

var audio, audioCtx, analyser, audioSource, frequencyBin, audioElement;

var audio = new Audio();
//must stream as anon because of CORS
audio.crossOrigin = "anonymous";
//was bumping joji - yeah right  - also you need to make a sounds folder in the assets folder. Thats where the file
//looks for the mp3.
audio.src = 'assets/sounds/yeah_right.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;

function initPlayer() {
    audioElement = document.getElementById('audioElement');
    audioElement.appendChild(audio);
    audioCtx =  new (window.AudioContext || window.webkitAudioContext)();
    audioSource = audioCtx.createMediaElementSource(audio);
    analyser = audioCtx.createAnalyser();

    audioSource.connect(analyser);
    analyser.connect(audioCtx.destination);

    visualize();
}

function visualize() {
    if (audio.currentTime > timeEnd) {
        audio.pause();
        return;
    }

    window.requestAnimationFrame(visualize);
    frequencyBin = new Uint8Array(analyser.frequencyBinCount);
    var max = frequencyBin.length - 1;
    analyser.getByteFrequencyData(frequencyBin);

    // set color
    var randI = Math.floor(getRandomIntInclusive(0, max) / gridRows);
    var randJ = Math.floor(getRandomIntInclusive(0, max) / gridColumns);
    var a, b, c;
    try {
        a = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
        b = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
        c = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
    } catch (e) {
        return false;
    }
    var hexString = '#'+a+''+b+''+c;
    ctx.fillStyle = hexString;

    // draw on coordinate
    for (var i = 0; i < gridRows; i++) {
        for (var j = 0; j < gridColumns; j++) {
            var x = randI * gridWidth;
            var y = randJ * gridHeight;
            ctx.fillRect(x, y, gridWidth, gridHeight);
        }
    }

}

function getRandomIntInclusive(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
	## You need to host this folder on a webserver like NODE, NGINX, or Apache (I was using XAMPP on windows). You need to make the request for the
	## song file to appear as though it comes from a http, https. Otherwise chrome wont allow you to play the file.
	## After this is setup restart the server and go to localhost:8080. Then youre watching it play out
	<VirtualHost *:8080>
	ServerName kmlviewer.test
	DocumentRoot "C:/xampp/htdocs/musiclookslike"
	<Directory "C:/xampp/htdocs/musiclookslike">
	AllowOverride All
	Order Allow,Deny
	Allow from all
	</Directory>
	</VirtualHost>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HACKATHON 1</title>
	</head>
	<body>
	<!-- You need to change this to a div. Something about user input loading audio on chrome -->
	<div id="audioElement">
	</div>

	<canvas id="canvas" width="1000" height="900"></canvas>
	<script type="text/javascript" src="assets/js/site.js"></script>
	</body>
	</html>

	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;

	//modify the next two vars to changes canvas size. I wanted it smaller.
	var gridRows = 64;
	var gridColumns = 64;
	var gridWidth = Math.floor(canvasWidth / gridRows);
	var gridHeight = Math.floor(canvasWidth / gridColumns);

	var strokeColor = 'rgb(219, 219, 219)';
	//wanted a 60 second timeout.
	var timeEnd = 60;

	// draw tiles
	function drawTiles() {
	for (var i = 0; i < gridRows; i++) {
	for (var j = 0; j < gridColumns; j++) {
	var x = j * gridWidth;
	var y = i * gridHeight;
	ctx.strokeStyle = strokeColor;
	ctx.strokeRect(x, y, gridWidth, gridHeight);
	}
	}
	}

	function drawBackground() {
	ctx.rect(0, 0, canvasWidth, canvasHeight);
	ctx.fillStyle = 'black';
	ctx.fill();
	}

	// drawBackground();
	// drawTiles();


	// Initialize the player
	// chrome wont allow this to work unless started by user gesture.
	window.addEventListener('click', initPlayer, false);

	var audio, audioCtx, analyser, audioSource, frequencyBin, audioElement;

	var audio = new Audio();
	//must stream as anon because of CORS
	audio.crossOrigin = "anonymous";
	//was bumping joji - yeah right - also you need to make a sounds folder in the assets folder. Thats where the file
	//looks for the mp3.
	audio.src = 'assets/sounds/yeah_right.mp3';
	audio.controls = true;
	audio.loop = true;
	audio.autoplay = true;

	function initPlayer() {
	audioElement = document.getElementById('audioElement');
	audioElement.appendChild(audio);
	audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)();
	audioSource = audioCtx.createMediaElementSource(audio);
	analyser = audioCtx.createAnalyser();

	audioSource.connect(analyser);
	analyser.connect(audioCtx.destination);

	visualize();
	}

	function visualize() {
	if (audio.currentTime > timeEnd) {
	audio.pause();
	return;
	}

	window.requestAnimationFrame(visualize);
	frequencyBin = new Uint8Array(analyser.frequencyBinCount);
	var max = frequencyBin.length - 1;
	analyser.getByteFrequencyData(frequencyBin);

	// set color
	var randI = Math.floor(getRandomIntInclusive(0, max) / gridRows);
	var randJ = Math.floor(getRandomIntInclusive(0, max) / gridColumns);
	var a, b, c;
	try {
	a = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
	b = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
	c = frequencyBin[getRandomIntInclusive(0, max)].toString(16);
	} catch (e) {
	return false;
	}
	var hexString = '#'+a+''+b+''+c;
	ctx.fillStyle = hexString;

	// draw on coordinate
	for (var i = 0; i < gridRows; i++) {
	for (var j = 0; j < gridColumns; j++) {
	var x = randI * gridWidth;
	var y = randJ * gridHeight;
	ctx.fillRect(x, y, gridWidth, gridHeight);
	}
	}

	}

	function getRandomIntInclusive(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}