HTML5 Audio Player

An Audio Player that has custom controls and utilizes the Web Audio API to create a visualizer.

HTML

<div id="audioContainer" style="width:960px; height:568px; background-size: 960px 540px;">
	<div id="player" style="width:960px; height:568px;">
    <audio id="giAudio" preload width="960" height="540">
        <source src="http://halleonard-audio.s3.amazonaws.com/35022797.mp3" id="srcMP3" type="audio/mp3">
        <div>Your Browser will not support this audio</div>
    </audio>
    <!-- Meta Fields-->
    <div id="metadata">
    	<h2 id="md-title">Red House</h2>
        <h3 id="md-artist">Jimi Hendrix</h3>
        <h4 id="md-format">Audio Play-Along</h4>
    </div>
    <!-- Video Controls -->
    <div id="media-controls">
    	<button type="button" id="play-pause" class="paused" >PLAY</button>
        <button type="button" id="rewind10" >REWIND 10 SECONDS</button>
        <button type="button" id="loop" >LOOP</button>
        <input id="seekslider" type="range" min="0" max="100" value="0">
        <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
        <!--
        <button id="fullscreenbtn" >FS</button>
        <button id="popoutbtn" >POPOUT</button>
        -->
        <div id="fullVolume">
            <button id="mutebtn" >MUTE</button>
            <div id="volumeContainer"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1" class="vertical" orient="vertical"></div>
        </div>
    </div>
    
    <canvas id="visual" style="width:960px; height:540px; background:url(http://www.guitarinstructor.com/jmj-sandbox/videoPlayer/images/poster.jpg) 0 0 no-repeat #000; background-size: 960px 540px;"></canvas>
    
    </div>
</div>

<input type=hidden id="varAudio" value="http://halleonard-audio.s3.amazonaws.com/35022797.mp3">
<input type=hidden id="varWidth" value="960">
<input type=hidden id="varHeight" value="540">

CSS

html, body{
	padding: 0;
	margin: 0;
}

/* Desperate to remove focus outline in firefox */
textarea:focus, input:focus {
  outline:0;
}

*:focus {
  outline:0;
}

div#player{
	background:#000;
	margin: 0px auto;
	position: relative;
}

div#videoContainer, div#audioContainer{
	background:url(http://www.guitarinstructor.com/jmj-sandbox/videoPlayer/images/poster.jpg) 0 0 no-repeat #000;
	margin: 20px auto 0;
	position: relative;
	overflow: hidden;
}

div#player:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
	background-color: black;
}

div#player:-webkit-full-screen video {
	width: 100% !important;
	height: 100% !important;
}

div#player:-webkit-full-screen #media-controls {
	position: relative;
	bottom: 35px;
}
		

div#metadata{
	position: absolute;
	width: 100%;
	bottom: 13%;
	visibility:visible;
}

div#metadata.playing{
	visibility:hidden;
}

div#metadata h2, div#metadata h3, div#metadata h4{
	font-family: Arial, sans-serif;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px;
	text-align: center;
	text-shadow:
       0 3px 1px #000,
     -1px -1px 1px #000,  
      1px -1px 1px #000,
      -1px 1px 1px #000,
       1px 1px 1px #000;
}

div#metadata h2{
	font-size: 175%;
}

div#metadata h3{
	font-size: 125%;
}

div#metadata h4{
	font-size: 100%;
	font-weight: normal;
}


div#videoContainer:-webkit-full-screen div#metadata h2{
	font-size: 300%;
}

div#videoContainer:-webkit-full-screen div#metadata h3{
	font-size: 200%;
}

div#videoContainer:-webkit-full-screen div#metadata h4{
	font-size: 150%;
	font-weight: normal;
}

div#media-controls, span#curtimetext, span#durtimetext{
	font-size: 10px;
}


div#media-controls{
	width: 100%;
	height: 28px;
	display: block;
	color:#CCC;
	font-family: Arial, sans-serif;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	position: relative;
	
	background: #4c4c4c;
	background:...

JavaScript

/*-----------------------------------------------------------------------------*/
/*---------------------------- AUDIO PLAYER SCRIPT ----------------------------*/
/*-----------------------------------------------------------------------------*/

var ac, player, vid, track, srcM, srcW, playbtn, loopbtn, rewindbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullVolume, popupbtn, fullscreenbtn, metadata, mediacontrols, dialog;

var varTitle, varArtist, varWidth, varHeight, varFormat, varFile, varCap, varAudio;

var context, canvas, track, sourceNode, analyser, canvasContext, bufferLength, dataArray;

ac = document.getElementById("audioContainer");
player = document.getElementById("player");
track = document.getElementById("giAudio");
metadata = document.getElementById("metadata");

mediacontrols = document.getElementById("media-controls");

playbtn = document.getElementById("play-pause");
loopbtn = document.getElementById("loop");
rewindbtn = document.getElementById("rewind10");
seekslider = document.getElementById("seekslider");
curtimetext = document.getElementById("curtimetext");
durtimetext = document.getElementById("durtimetext");
mutebtn = document.getElementById("mutebtn");
volumeslider = document.getElementById("volumeslider");
fullVolume = document.getElementById("fullVolume");

canvas =...