<!--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
}
}