jlcarvalho/app.js

## app.js
var sound = new Audio('http://media.soundcloud.com/stream/BkDZIahFB7ME.mp3');

sound
	.isPlayed = false
	.volume = 1;


$('#butt').on('click',function(){
	if (!sound.isPlayed) {
		sound.play(); // Play sound
		$(this)
			.removeClass('btn-succes glyphicon-play')
			.addClass('btn-danger glyphicon-pause');
	} else {
		sound.pause(); // Pause sound
		$(this)
			.removeClass('btn-danger glyphicon-pause')
			.addClass('btn-success glyphicon-play');
	}
	sound.isPlayed = !sound.isPlayed;
});

$('#vol-value').css({'width': sound.volume * 100 + "%"});
$('#vol-dec').on('click', function(){
	sound.volume -= 0.05;
	$('#vol-value').css({'width': sound.volume * 100 + "%"});
});


$('#vol-inc').on('click', function(){
	sound.volume += 0.05;
	$('#vol-value').css({'width': sound.volume * 100 + "%"});
});

var audioElement = sound;
audioElement.addEventListener('play', draw);

var context = new AudioContext(),
		analyser = context.createAnalyser(),
		source,
		bars = [];

window.onload = function() {
	source = context.createMediaElementSource(audioElement);

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

	prepareElements();
};

function prepareElements() {
	var el = document.getElementById("spectrum"),
			width = 20;

	for (var i=0; i<50; i++) {
		var bar = document.createElement("div");
		bar.style.left = (width + 5) * i + "px";
		el.appendChild(bar);
		bars.push(bar);
	}
}

function draw() {
	requestAnimationFrame(draw);

	var freqData = new Uint8Array(analyser.frequencyBinCount);
		analyser.getByteFrequencyData(freqData);

	for (var i=0; i<bars.length; i++) {
		var freq = Math.round(i*freqData.length/bars.length);
		bars[i].style.height = freqData[freq]+"px";
	}
}


## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Gistter</title>

    <!-- Necessary to insert the styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <!-- Your code here -->

    <div class="container">
      <div id="spectrum"></div>
      <div class="wrap">
        <div class="volume-control-panel">
          <button id="vol-dec" class="volume-btn volume-btn-minus glyphicon glyphicon-minus"></button>
          <button id="vol-inc" class="volume-btn volume-btn-plus glyphicon glyphicon-plus"></button>
          <div class="volume-bar">
            <div id="vol-value" class="volume-value"></div>
          </div>
        </div>
        <button id="butt" class="btn btn-success btn-xlg glyphicon glyphicon-play"></button>
      </div>
    </div>

    <!-- Necessary to insert the javascript -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

## main.css
html,
body {
  width:100%;
  height: 100%;
}
#spectrum {
  position: absolute;
  background-color: #222;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
#spectrum * {
  position: absolute;
  bottom: 0;
  width: 20px;
  background-color: #90ee90;
}
.wrap {
  width: 200px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.volume-control-panel {
  display: block;
  width: 200px;
  margin: 0 auto;
  margin-bottom: 10px;
  zoom: 1;
}
.volume-control-panel:before,
.volume-control-panel:after {
  content: "";
  display: table;
}
.volume-control-panel:after {
  clear: both;
}
.volume-btn {
  display: block;
  width: 20%;
  top: 0;
  height: 30px;
  color: #08f;
  background-color: #fff;
  border: 1px solid #08f;
  outline: none;
}
.volume-btn-minus {
  float: left;
  border-right: none;
}
.volume-btn-plus {
  float: right;
  border-left: none;
}
.volume-bar {
  width: 60%;
  height: 30px;
  border: 1px solid #08f;
  margin: 0 auto;
  position: relative;
}
.volume-value {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #08f;
}
.btn-xlg {
  display: block;
  width: 200px;
  height: 100px;
  font-size: 32px;
}
	var sound = new Audio('http://media.soundcloud.com/stream/BkDZIahFB7ME.mp3');

	sound
	.isPlayed = false
	.volume = 1;


	$('#butt').on('click',function(){
	if (!sound.isPlayed) {
	sound.play(); // Play sound
	$(this)
	.removeClass('btn-succes glyphicon-play')
	.addClass('btn-danger glyphicon-pause');
	} else {
	sound.pause(); // Pause sound
	$(this)
	.removeClass('btn-danger glyphicon-pause')
	.addClass('btn-success glyphicon-play');
	}
	sound.isPlayed = !sound.isPlayed;
	});

	$('#vol-value').css({'width': sound.volume * 100 + "%"});
	$('#vol-dec').on('click', function(){
	sound.volume -= 0.05;
	$('#vol-value').css({'width': sound.volume * 100 + "%"});
	});


	$('#vol-inc').on('click', function(){
	sound.volume += 0.05;
	$('#vol-value').css({'width': sound.volume * 100 + "%"});
	});

	var audioElement = sound;
	audioElement.addEventListener('play', draw);

	var context = new AudioContext(),
	analyser = context.createAnalyser(),
	source,
	bars = [];

	window.onload = function() {
	source = context.createMediaElementSource(audioElement);

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

	prepareElements();
	};

	function prepareElements() {
	var el = document.getElementById("spectrum"),
	width = 20;

	for (var i=0; i<50; i++) {
	var bar = document.createElement("div");
	bar.style.left = (width + 5) * i + "px";
	el.appendChild(bar);
	bars.push(bar);
	}
	}

	function draw() {
	requestAnimationFrame(draw);

	var freqData = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(freqData);

	for (var i=0; i<bars.length; i++) {
	var freq = Math.round(i*freqData.length/bars.length);
	bars[i].style.height = freqData[freq]+"px";
	}
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Gistter</title>

	<!-- Necessary to insert the styles -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="main.css">
	</head>
	<body>
	<!-- Your code here -->

	<div class="container">
	<div id="spectrum"></div>
	<div class="wrap">
	<div class="volume-control-panel">
	<button id="vol-dec" class="volume-btn volume-btn-minus glyphicon glyphicon-minus"></button>
	<button id="vol-inc" class="volume-btn volume-btn-plus glyphicon glyphicon-plus"></button>
	<div class="volume-bar">
	<div id="vol-value" class="volume-value"></div>
	</div>
	</div>
	<button id="butt" class="btn btn-success btn-xlg glyphicon glyphicon-play"></button>
	</div>
	</div>

	<!-- Necessary to insert the javascript -->
	<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	html,
	body {
	width:100%;
	height: 100%;
	}
	#spectrum {
	position: absolute;
	background-color: #222;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	}
	#spectrum * {
	position: absolute;
	bottom: 0;
	width: 20px;
	background-color: #90ee90;
	}
	.wrap {
	width: 200px;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	}
	.volume-control-panel {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin-bottom: 10px;
	zoom: 1;
	}
	.volume-control-panel:before,
	.volume-control-panel:after {
	content: "";
	display: table;
	}
	.volume-control-panel:after {
	clear: both;
	}
	.volume-btn {
	display: block;
	width: 20%;
	top: 0;
	height: 30px;
	color: #08f;
	background-color: #fff;
	border: 1px solid #08f;
	outline: none;
	}
	.volume-btn-minus {
	float: left;
	border-right: none;
	}
	.volume-btn-plus {
	float: right;
	border-left: none;
	}
	.volume-bar {
	width: 60%;
	height: 30px;
	border: 1px solid #08f;
	margin: 0 auto;
	position: relative;
	}
	.volume-value {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: #08f;
	}
	.btn-xlg {
	display: block;
	width: 200px;
	height: 100px;
	font-size: 32px;
	}