Flexbox MPC

<!--This is my first stab at making a drum machine. I decided to use this opportunity to get good at flex-box as well. Though this project was not made in the most efficient way, the point is that I finished it. I plan to learn from the mistakes I made on this project to improve on my next drum machine, Thanks for checking out! -->
<link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
<!--  MAIN CONTAINER FOR MPC -->
<div class='main-container'>
<div class="flex-container">
<h1 class='title'>Flex MPC</h1>
<div class='container'>
<!--  Tap tempo  -->
<button id="btn"><div class="tap"><p id='green'>Tap</p></div></button>
<!-- Full level     -->
<div id='outer_shadow'>
<button id="btn-1">
<div class="full-level">
<p id='green-two'>Full Level</p>
</div>
</button>
</div>
</div>
<!--  16 LEVEL BUTTON  -->
<div class='container-2'>
<div id='outer-shadow-2'>
<button id="btn-2">
<div class="sixteen-level">
<p id='orange'>16 Level</p>
</div>
</button>
</div>
</div>
<!-- ERASE BUTTON  -->
<div class='container-4'>
<div id='outer-shadow-4'>
<button id="btn-4">
<div class="erase">
<p id='red' >ERASE</p>
</div>
</button>
</div>
</div>
<!--  NOTE REPEAT BUTTON  -->
<div class='container-3'>
<div id='outer-shadow-3'>
<button id="btn-3">
<div class="note-repeat">
<p id='blue' >NOTE REPEAT</p>
</div>
</button>
</div>
</div>
<!-- BOTTOM BUTTONS   -->
<div id='container'>
<!--  RECORD BUTTON  -->
<div class='container-5'>
<div id='outer-shadow-5'>
<button id="btn-5">
<div class="RECORD">
<p>• REC</p>
</div>
</button>
</div>
</div>
<!--OVER DUB PROPERTIES    -->
<div class='container-6'>
<div id='outer-shadow-6'>
<button id="btn-6">
<div class="dub">
<p>• O-DUB</p>
</div>
</button>
</div>
</div>
<!--PLAY BUTTON PROPERTIES    -->
<div class='container-7'>
<div id='outer-shadow-7'>
<button id="btn-7">
<div class="play">
<p>• PLAY</p>
</div>
</button>
</div>
</div>
<!--STOP BUTTON    -->
<div class='container-8'>
<div id='outer-shadow-8'>
<button id="btn-8">
<div class="stop">
<p>• STOP</p>
</div>
</button>
</div>
</div>
</div>
<!--ID CONTAINER BOX-->
<!--   BUTTON BUTT END -->
<audio loop id="audio1" src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/NEw-looperman-l-1074761-0074275-jaceziii-j-sine-square-90bpm.wav></audio>
<audio loop id="audio2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/Newlooperman-l-1273564-0096409-franko75-90-bpm-synth-any-genre.wav"></audio>
<audio loop id="audio3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-0817298-0075580-enzotic-8-bit-style-loop.wav"></audio>
<audio loop id="audio4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-1172494-0081589-yappy-organ-flute-90bpm.wav"></audio>
<audio loop id="audio5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-1172494-0081172-yappy-piano-90bpm.wav"></audio>
<audio loop id="audio6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-0911223-0093588-silencekills-tin-man-horns-90-dm.wav"></audio>
<audio loop id="audio7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-0911223-0096296-silencekills-space-lift-drums-90.wav"></audio>
<audio loop id="audio8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-1007049-0096241-bakobone-90bpm-drums.wav"></audio>
<audio loop id="audio9" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/343880/looperman-l-0116269-0046730-dextdee-sweetness.wav"></audio>
<audio loop id=""></audio>
<!--PAD BUTTONS    -->
<div class='box'>
<button id='p1'>  <div class="flex-item" onClick="play()">Pad 1</div></button>
<button id='p2'>  <div class="flex-item" onClick="playA()">Pad 2</div></button>
<button id='p3'>  <div class="flex-item" onClick="playB()">Pad 3</div></button>
<button id='p4'>  <div class="flex-item" onClick="playC()">Pad 4</div></button>
<button id='p5'>  <div class="flex-item" onClick="playD()">Pad 5</div></button>
<button id='p6'>  <div class="flex-item" onClick="playE()">Pad 6</div></button>
<button id='p7'>  <div class="flex-item" onClick="playF()">Pad 7</div></button>
<button id='p8'>  <div class="flex-item" onClick="playG()">Pad 8</div></button>
<button id='p9'>  <div class="flex-item" onClick="playH()">Pad 9</div></button>
</div>
</div>
</div>
<!--MAIN CONTAINER END -->
<footer><h1>
<ul>
<li>
Thanks for checking out my flexbox MPC. I've always wanted to design my own drum machine. So, here it is, my first MPC. What a fun way to work with flexbox!
<li>
<p>Check out my first Flex MPC track here! <a  class='link' href=" https://soundcloud.com/harun-pehl-van" target="_blank">soundcloud.com/harun-pehl-van </p>
</li>
</li>
</ul>
</h1><footer>
body {
  background-color: grey;
}


/*  MAIN CONTAINER FOR MPC*/

.main-container {
  position: relative;
  border: 32px inset #333333;
  border-radius: 5%;
  margin-left: 15%;
  width: 900px;
  height: 620px;
  box-shadow: 0px 0px 5px 5px #262626;

  background: black;
  /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(#1a1a1a, grey);
  /* Safari */
  background: -o-radial-gradient(#1a1a1a, grey);
  /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(#1a1a1a, grey);
  /* Firefox 3.6 to 15 */
  background: radial-gradient(#1a1a1a, #262626);
  /* Standard syntax */
  border: linear-gradient(#1a1a1a, #262626);
  /* Standard syntax */
}


/*  TITLE MPC*/

.title {
  font-family: 'Russo One', sans-serif;
  position: absolute;
  margin-top: -40px;
  float: left;
  text-align: center;
  color:black ;
}


/* GRADIENT BACKGROUND */

.flex-container {
  position: relative;
  display: -webkit-flex;
  display: flex;
  width: 500px;
  height: 320px;
  border-radius: 15px;
  box-shadow: 0px 0px 1px 1px;
  border: 1px solid silver;
  margin-top: 36px;
  margin-left: 15%;
  padding: 50px 50px;
  padding-bottom: 142px;
  background: -webkit-linear-gradient(lightslategrey, lightsteelblue);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(lightslategrey, lightsteelblue);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(lightslategrey, lightsteelblue);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient( lightslategrey, lightsteelblue);
  /* Standard syntax (must be last) */
}


/* PARENT PAD BOX CONTAINER  */

.box {
  position: relative;
  border: 2px solid transparent;
  width: 430px;
  margin-left: 37px;
  margin-top: 22px;
  text-align: center;
}


/*  CHILD BOXS'*/

.flex-item {
  position: relative;
  background-color: #262626;
  box-shadow: 0px 0px 3px 2px;
  border-radius: 5%;
  width: 100px;
  height: 90px;
  margin-top: 10px;
  margin-left: 2px;
  padding: 11px;
  padding-top: 5px;
}


/* LEFT SIDE BUTTON CONTAINER*/

.container {
  position: absolute;
  width: 50px;
  height: 420px;
  border: 2px solid transparent;
  margin-left: -31px;
}


/* PAD UNDERPAINTS */

button {
  text-align: center;
  padding-bottom: 7px;
  background-color: Darkred;
  border-radius: 5%;
  border: -webkit-linear-gradient(#262626, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-linear-gradient(#262626, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-linear-gradient(#262626, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  border: linear-gradient(#262626, #a6a6a6);
  /* Standard syntax (must be last) */
}

#btn {
  text-align: center;
  position: absolute;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  margin-top: 13px;
  background-color: #ff6600;
  background-color: -webkit-radial-gradient(#262626, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#262626, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#262626, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, black);
  /* Standard syntax (must be last) */
}


/* TAP INNER BUTTON */

.tap {
  border-radius: 100%;
  border: 2.4px solid whitesmoke;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  margin-left: 3px;
  background-color: black;
  text-align: center;
}


/*TAP FONT  */

div .tap p {
  position: absolute;
  font-size: 80%;
  margin-top: 5.5px;
  margin-left: 2.8px;
  color: white;
}


/* FULL LEVEL BUTTON PROPERTIES */

#outer_shadow {
  position: absolute;
  margin-top: 125px;
  border: 1px solid black;
  border-radius: 15%;
  width: 51px;
  height: 22px;
}

#btn-1 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 20px;
  border: ridged white;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*FULL LEVEL FONT  */

.full-level p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 12px;
  color: white;
  position: absolute;
  margin-top: -5px;
  margin-left: -6px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
}


/*  16 LEVEL BUTTON PROPERTIES*/

.container-2 {
  position: absolute;
  margin-top: 60px;
  margin-left: -29px;
  width: 40px;
  height: 15px;
}

#outer-shadow-2 {
  position: absolute;
  margin-top: 118px;
  border: 1px inset black;
  border-radius: 15%;
  width: 51px;
  height: 21px;
}


/*16 LEVEL BUTTON */

#btn-2 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 20px;
  border: ridged white;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*16 LEVEL FONT  */

.sixteen-level p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 12px;
  color: white;
  position: absolute;
  margin-top: -5px;
  margin-left: -6px;
 font-size: 8px;
  font-weight: bold;
  text-align: center;
}


/*ERASE BUTTON PROPERTIES  */

.container-4 {
  position: absolute;
  margin-top: 154px;
  margin-left: -29px;
}

#outer-shadow-4 {
  position: absolute;
   top: 118px;
  border: 1px inset whitesmoke;
  border-radius: 15%;
  width: 51px;
  height: 28px;
}


/* ERASE BUTTON */

#btn-4 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 28px;
  border: ridged whitesmoke;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*ERASE FONT  */

.erase p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 21px;
  color: white;
  position: absolute;
  top: -9px;
  margin-left: -6px;
  font-size: 9px;
  font-weight: bold;
  text-align: center;
}


/* NOTE REPEAT BUTTONS */

.container-3 {
  position: absolute;
  margin-top: 228px;
  margin-left: -29px;
}

#outer-shadow-3 {
  position: absolute;
  margin-top: 118px;
  border: 1px inset whitesmoke;
  border-radius: 15%;
  width: 51px;
  height: 28px;
}


/* NOTE-REPEAT BUTTON */

#btn-3 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 28px;
  border: ridged whitesmoke;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*NOTE-REPEAT FONT  */

.note-repeat p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 21px;
  color: white;
  position: absolute;
  margin-top: -9px;
  margin-left: -6px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
}


/*BOTTOM BUTTONS  */

#container {
  position:absolute;
  margin-left:42px;

}

/* RECORD BUTTON PROPERTIES */

.container-5 {
  position: absolute;
  margin-top: 414px;
  margin-left: 66px;
}

#outer_shadow_5 {
  position: absolute;
  margin-top: 125px;
  border: 1px solid black;
  border-radius: 15%;
  width: 51px;
  height: 22px;
}

#btn-5 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 20px;
  border: ridged white;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*RECORD FONT  */

.RECORD p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 12px;
  color: RED;
  position: absolute;
  margin-top: -5px;
  margin-left: -6px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
}


/* OVER DUB BUTTON PROPERTIES */

.container-6 {
  position: absolute;
  margin-top: 414px;
  margin-left: 144px;
}

#outer_shadow_6 {
  position: absolute;
  margin-top: 125px;
  border: 1px solid black;
  border-radius: 15%;
  width: 51px;
  height: 22px;
}

#btn-6 {
  margin-top: 1px;
  margin-left: 1.5px;
  position: absolute;
  width: 50px;
  height: 20px;
  border: ridged white;
  border-radius: 15%;
  background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040, black);
  /* Standard syntax (must be last) */
}


/*PLAY FONT  */

.dub p {
  border: 2px solid Lightgrey;
  border-radius: 5%;
  width: 42px;
  height: 12px;
  color: ORANGE;
  position: absolute;
  margin-top: -5px;
  margin-left: -6px;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
}

/* PLAY BUTTON PROPERTIES */

.container-7 { 
  position:absolute;
  margin-top:414px;
  margin-left:224px;
}

#outer_shadow_7{
  position:absolute;
  margin-top:125px;
  border:1px solid black;
  border-radius:15%;
  width:51px;
  height:22px;
}

#btn-7{
  margin-top:1px;
  margin-left:1.5px;
  position:absolute;
  width:50px;
  height: 20px;
  border: ridged white;
  border-radius:15%;

    background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040,black);
  /* Standard syntax (must be last) */
}

/*RECORD FONT  */
.play p{
  border:2px solid Lightgrey;
  border-radius:5%;
  width:42px;
  height:12px;
  color:GREEN;
  position:absolute;
  margin-top:-5px;
  margin-left:-6px;
  font-size: 8px;
  font-weight:bold;
  text-align:center;
}

/*STOP BUTTON PROPERTIES  */



.container-8 { 
  position:absolute;
  margin-top:414px;
  margin-left:306px;
}

#outer_shadow_8{
  position:absolute;
  margin-top:125px;
  border:1px solid black;
  border-radius:15%;
  width:51px;
  height:22px;
}

#btn-8{
  margin-top:1px;
  margin-left:1.5px;
  position:absolute;
  width:50px;
  height: 20px;
  border: ridged white;
  border-radius:15%;

    background-color: -webkit-radial-gradient(#404040, #a6a6a6);
  /* For Safari 5.1 to 6.0 */
  border: -o-radial-gradient(#404040, #a6a6a6);
  /* For Opera 11.1 to 12.0 */
  border: -moz-radial-gradient(#404040, #a6a6a6);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(#404040,black);
  /* Standard syntax (must be last) */
}

/*STOP FONT  */
.stop p{
  border:2px solid Lightgrey;
  border-radius:5%;
  width:42px;
  height:12px;
  color:red;
  position:absolute;
  margin-top:-5px;
  margin-left:-6px;
font-size: 8px;
  font-weight:bold;
  text-align:center;
}

#controls{
  position:absolute;
  margin-top:480px;
  margin-left:110px;
  background-color:steelblue;
  box-shadow: 0px 0px 2px 1px steelblue;
}

footer {
  font-family: 'Bangers', cursive;
  color: #663300 ;
  font-size:12px;
}

.link{
  color:Darkgreen;
  position:relative;
   /* Chrome, Safari, Opera */
    -webkit-animation-name: link;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: link;
    animation-duration: .8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes link {
    0%   {  top:0px;}
    25%  {  top:0px;}
    50%  {  top:200px;}
    75%  {  top:200px;}
    100% {  top:0px;}
}

/* Standard syntax */
@keyframes link {
    0%   {  top:1px;}
    25%  {  top:2px;}
    50%  {  top:-1px;}
    75%  {  top:-2px;}
    100% {  top:-1px;}
}
// If anyone has any tips on how I can improve my code feel free to message me. I'd love to hear from you and I would be very greatful for some feed back on better techniques. Thanks for stopping by!


// TAP BUTTON FUNCTION
document.getElementById("green").onmouseover = function() {mouseOver()};

document.getElementById("green").onmouseout = function() {mouseOut()};

function mouseOver() {
    document.getElementById("green").style.color = "green";
}

function mouseOut() {
    document.getElementById("green").style.color = "white";
}

// FULL BUTTON FUNCTION
document.getElementById("green-two").onmouseover = function() {mouseOver_full()};

document.getElementById("green-two").onmouseout = function() {mouseOut_full()};

function mouseOver_full() {
    document.getElementById("green-two").style.color = " #009900";
}

function mouseOut_full() {
    document.getElementById("green-two").style.color = "white";
}


// SIXTEEN LEVEL BUTTON FUNCTION
document.getElementById("orange").onmouseover = function() {mouseOver_erase()};

document.getElementById("orange").onmouseout = function() {mouseOut_erase()};

function mouseOver_erase() {
    document.getElementById("orange").style.color = "#cc3300";
}

function mouseOut_erase() {
    document.getElementById("orange").style.color = "white";
}


// ERASE BUTTON FUNCTION
document.getElementById("red").onmouseover = function() {mouseOver_sixteen()};

document.getElementById("red").onmouseout = function() {mouseOut_sixteen()};

function mouseOver_sixteen() {
    document.getElementById("red").style.color = "#b30000";
}

function mouseOut_sixteen() {
    document.getElementById("red").style.color = "white";
}


// NOTE REPEAT BUTTON FUNCTION
document.getElementById("blue").onmouseover = function() {mouseOver_repeat()};

document.getElementById("blue").onmouseout = function() {mouseOut_repeat()};

function mouseOver_repeat() {
    document.getElementById("blue").style.color = "#4d4dff";
}

function mouseOut_repeat() {
    document.getElementById("blue").style.color = "white";
}


// PAD ONE AUDIO/COLOR PROPERTIES

document.getElementById('p1').onmouseover = function() {padOneClick()};
document.getElementById('p1').onmouseout = function() {padOneOut()};

function padOneClick() {
  document.getElementById('p1').style.color='#ff0000';

}

function padOneOut() {
  document.getElementById('p1').style.color='black';

}


// PAD BACKGROUND COLOR CHANGE
document.getElementById('p1').onclick = function() {padOneClick()};
document.getElementById('p1').onmouseout = function() {padOneOut()};

function padOneClick() {
  document.getElementById('p1').style.color='#ff0000';

}

function padOneOut() {
  document.getElementById('p1').style.color='black';

}


// PAD TWO AUDIO/COLOR PROPERTIES

document.getElementById('p2').onmouseover = function() {padTwoClick()};
document.getElementById('p2').onmouseout = function() {padTwoOut()};

function padTwoClick() {
  document.getElementById('p2').style.color='#ff4000';

}

function padTwoOut() {
  document.getElementById('p2').style.color='black';

}

// PAD THREE AUDIO/COLOR PROPERTIES

document.getElementById('p3').onmouseover = function() {padThreeClick()};
document.getElementById('p3').onmouseout = function() {padThreeOut()};

function padThreeClick() {
  document.getElementById('p3').style.color='#ff8000';

}

function padThreeOut() {
  document.getElementById('p3').style.color='black';

}

// PAD FOUR AUDIO PROPERTIES

document.getElementById('p4').onmouseover = function() {padFourClick()};
document.getElementById('p4').onmouseout = function() {padFourOut()};

function padFourClick() {
  document.getElementById('p4').style.color='    #00ffbf';

}

function padFourOut() {
  document.getElementById('p4').style.color='black';

}

// PAD FIVE AUDIO PROPERTIES

document.getElementById('p5').onmouseover = function() {padFiveClick()};
document.getElementById('p5').onmouseout = function() {padFiveOut()};

function padFiveClick() {
  document.getElementById('p5').style.color='#00ffff';

}

function padFiveOut() {
  document.getElementById('p5').style.color='black';

}

// PAD SIX AUDIO PROPERTIES

document.getElementById('p6').onmouseover = function() {padSixClick()};
document.getElementById('p6').onmouseout = function() {padSixOut()};

function padSixClick() {
  document.getElementById('p6').style.color='#00bfff';

}

function padSixOut() {
  document.getElementById('p6').style.color='black';

}

// PAD Seven AUDIO PROPERTIES

document.getElementById('p7').onmouseover = function() {padSevenClick()};
document.getElementById('p7').onmouseout = function() {padSevenOut()};

function padSevenClick() {
  document.getElementById('p7').style.color='    #8000ff';

}

function padSevenOut() {
  document.getElementById('p7').style.color='black';

}

// PAD Eight AUDIO PROPERTIES

document.getElementById('p8').onmouseover = function() {padEightClick()};
document.getElementById('p8').onmouseout = function() {padEightOut()};

function padEightClick() {
  document.getElementById('p8').style.color='#bf00ff';

}

function padEightOut() {
  document.getElementById('p8').style.color='black';

}


// PAD NINE AUDIO PROPERTIES

document.getElementById('p9').onmouseover = function() {padNineClick()};
document.getElementById('p9').onmouseout = function() {padNineOut()};

function padNineClick() {
  document.getElementById('p9').style.color='#ff0080';

}

function padNineOut() {
  document.getElementById('p9').style.color='black';

}

// PAD ONE AUDIO PROPERTIES

function play() {
    var audio = document.getElementById('audio1');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playA() {
    var audio = document.getElementById('audio2');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playB() {
    var audio = document.getElementById('audio3');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playC() {
    var audio = document.getElementById('audio4');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playD() {
    var audio = document.getElementById('audio5');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playE() {
    var audio = document.getElementById('audio6');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playF() {
    var audio = document.getElementById('audio7');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playG() {
    var audio = document.getElementById('audio8');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}

function playH() {
    var audio = document.getElementById('audio9');
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        audio.currentTime = 0
    }
}