genart.html

<div class="genartPage page" ng-swipe-left="responsive.selectPage(4)" ng-swipe-right="responsive.selectPage(6)">

	<style>
		.node {
			cursor: pointer;
			stroke: #3182bd;
			stroke-width: 1.5px;
		}
		
		.link {
			fill: none;
			stroke: #9ecae1;
			stroke-width: 1.5px;
		}
		
		.tabs-left,
		.tabs-right {
			border-bottom: none;
			padding-top: 2px;
		}

		.tabs-left {
			border-right: 1px solid #ddd;
		}
		
		.tabs-right {
			border-left: 1px solid #ddd;
		}
		
		.tabs-left>li,
		.tabs-right>li {
			float: none;
			margin-bottom: 2px;
		}
		
		.tabs-left>li {
			margin-right: -1px;
		}
		
		.tabs-right>li {
			margin-left: -1px;
		}
		
		.tabs-left>li.active>a,
		.tabs-left>li.active>a:hover,
		.tabs-left>li.active>a:focus {
			border-bottom-color: #ddd;
			border-right-color: transparent;
		}
		
		.tabs-right>li.active>a,
		.tabs-right>li.active>a:hover,
		.tabs-right>li.active>a:focus {
			border-bottom: 1px solid #ddd;
			border-left-color: transparent;
		}
		
		.tabs-left>li>a {
			border-radius: 4px 0 0 4px;
			margin-right: 0;
			display: block;
		}
		
		.tabs-right>li>a {
			border-radius: 0 4px 4px 0;
			margin-right: 0;
		}
	</style>
	<script src="js/p5.js" type="text/javascript"></script>
	<script src="js/p5.dom.js" type="text/javascript"></script>
	<script src="js/p5.sound.js" type="text/javascript"></script>
	<script src="js/spectrum.js" type="text/javascript"></script>

	<!-- Page Content -->
	<div class="container">

		<!-- Page Heading/Breadcrumbs -->
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">Generative Art
                    <small>Some Fun Stuff</small>
                </h1>
				<ol class="breadcrumb">
					<li><a href="index.html">Home</a>
					</li>
					<li class="active">About</li>
				</ol>
			</div>
		</div>
		<!-- /.row -->

		<!-- Intro Content -->
		<div class="col-sm-12">
			<h3>Exploring JavaScript</h3>
			<hr>
			<div class="col-xs-3">
				<!-- required for floating -->
				<!-- Nav tabs -->
				<ul class="nav nav-tabs tabs-left sideways">
					<li class="active"><a href="#home-v" data-toggle="tab">Audio Visualizer</a></li>
					<li><a href="#profile-v" data-toggle="tab">Code 2</a></li>
					<li><a href="#messages-v" data-toggle="tab">Code 3</a></li>
					<li><a href="#settings-v" data-toggle="tab">Code 4</a></li>
				</ul>
			</div>

<div class="col-xs-8">
				<!-- Tab panes -->
				<div class="tab-content">
					<div class="tab-pane active" id="home-v">
						<span id="upload">Audio Spectrum</span>
						<div class="player text-center">
							<button type="button" id="button_fbw" class="btn" onclick='buttonRewindPress()'>
								<i class="fa fa-fast-backward"></i>
							</button>

							<button type="button" id="button_bw" class="btn" onclick='buttonBackPress()'>
								<i class="fa fa-backward"></i>
							</button>

							<button type="button" id="button_play" class="btn">
								<i class="fa fa-play"></i>
							</button>

							<button type="button" id="button_stop" class="btn">
								<i class="fa fa-stop"></i>
							</button>

							<button type="button" id="button_fw" class="btn" onclick='buttonForwardPress()'>
								<i class="fa fa-forward"></i>
							</button>

							<button type="button" id="button_ffw" class="btn" onclick='buttonFastforwardPress()'>
								<i class="fa fa-fast-forward"></i>
							</button>
						</div>
						<canvas id="canvas" width="800" height="325" style="display: block;"></canvas>
						<script type="text/javascript">
							$(document).ready(function () {

								// create the audio context (chrome only for now)
								// create the audio context (chrome only for now)
								if (!window.AudioContext) {
									if (!window.webkitAudioContext) {
										alert('no audiocontext found');
									}
									window.AudioContext = window.webkitAudioContext;
								}
								var context = new AudioContext();
								var audioBuffer;
								var sourceNode;
								var analyser;
								var javascriptNode;

								// get the context from the canvas to draw on
								var ctx = $("#canvas").get()[0].getContext("2d");

								// create a gradient for the fill. Note the strange
								// offset, since the gradient is calculated based on
								// the canvas, not the specific element we draw
								var gradient = ctx.createLinearGradient(0, 0, 0, 300);
								gradient.addColorStop(1, '#000000');
								gradient.addColorStop(0.75, '#2B2B2B');
								gradient.addColorStop(0.25, '#979797');
								gradient.addColorStop(0, '#ffffff');


								// load the sound
								setupAudioNodes();
								//loadSound("assets/not-an-addict.mp3");


								function setupAudioNodes() {

									// setup a javascript node
									javascriptNode = context.createScriptProcessor(2048, 1, 1);
									// connect to destination, else it isn't called
									javascriptNode.connect(context.destination);


									// setup a analyzer
									analyser = context.createAnalyser();
									analyser.smoothingTimeConstant = 0.3;
									analyser.fftSize = 512;

									// create a buffer source node
									sourceNode = context.createBufferSource();
									sourceNode.connect(analyser);
									analyser.connect(javascriptNode);

									sourceNode.connect(context.destination);
								}

								// load the specified sound
								function loadSound(url) {
									var request = new XMLHttpRequest();
									request.open('GET', url, true);
									request.responseType = 'arraybuffer';

									// When loaded decode the data
									request.onload = function () {

										// decode the data
										context.decodeAudioData(request.response, function (buffer) {
											// when the audio is decoded play the sound
											playSound(buffer);
										}, onError);
									}
									request.send();
								}


								function playSound(buffer) {
									sourceNode.buffer = buffer;
									sourceNode.start(0);
								}



								// log if an error occurs
								function onError(e) {
									console.log(e);
								}






								// when the javascript node is called
								// we use information from the analyzer node
								// to draw the volume
								javascriptNode.onaudioprocess = function () {

									// get the average for the first channel
									var array = new Uint8Array(analyser.frequencyBinCount);
									analyser.getByteFrequencyData(array);

									// clear the current state
									ctx.clearRect(0, 0, 800, 325);

									// set the fill style
									ctx.fillStyle = gradient;
									drawSpectrum(array);

								}


								function drawSpectrum(array) {
									for (var i = 0; i < (array.length); i++) {
										var value = array[i];

										ctx.fillRect(i * 5, 325 - value, 2, 325);
										//  console.log([i,value])
									}
								};




								$("#button_stop").on("click", function () {
									if (playSound(null)){
                                        playSound(buffer);
                                        //$("#button_play").toggleClass('btn btn-success');
                                        //$("#button_play i").toggleClass("fa fa-play");

                                        //$("#button_stop").toggleClass('btn btn-success');
                                       // $("#button_stop i").toggleClass("fa fa-stop");
                                        console.log("button stop invoked.");
                                    }



								})


								$("#button_play").on("click", function () {

                                       // $("#button_stop").toggleClass('btn btn-success');
                                       // $("#button_stop i").toggleClass("fa fa-stop");

                                       // $("#button_play").toggleClass('btn btn-success');
                                       // $("#button_play i").toggleClass("fa fa-play");
                                        setupAudioNodes();
                                        loadSound("assets/not-an-addict.mp3");


                                    console.log("button play pressed, play was " + state);



                                })

							});
						</script>


					</div>
					<div class="tab-pane" id="profile-v">

						Code 2.

					</div>
					<div class="tab-pane" id="messages-v">Code 3.</div>
					<div class="tab-pane" id="settings-v">Code 4.</div>
				</div>
			</div>

			<div class="clearfix"></div>

		</div>




		<hr>

		<!-- Footer -->
		<footer>
			<div class="row">
				<div class="col-lg-12">
					<p>Copyright &copy; Rachid 2016</p>
				</div>
			</div>
		</footer>

	</div>
</div>