mirrors
/
codepens
1
Fork 0
Code Issues Pull Requests Releases Activity
codepens/drum-sequencer-w-sample-pad/dist/index.html

167 lines
5.2 KiB
HTML
Raw Permalink Normal View History

init
2023-10-06 23:12:53 +02:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - DRUM SEQUENCER w/ SAMPLE PAD</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum Sequencer</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/png" href="./favicon.png">
</head>
<body>
<div class="container">
<div id="p0">
<p class="drum-name">KICK</p>
<p class="drum-name">CLAP</p>
<p class="drum-name">HIHAT</p>
<p class="drum-name">RIM</p>
</div>
<div id="controls">
<div id="controls-left-side">
<div class="sampler" id="sampler1">Q</div>
<div class="sampler" id="sampler2">W</div>
<div class="sampler" id="sampler3">E</div>
<div class="sampler" id="sampler4">R</div>
</div>
<div id="controls-right-side">
<p id="bpm">130 BPM</p>
<input type="range" min="30" max="200" value="130" id="bpm-slider">
<p id="clear-track">CLEAR</p>
</div>
</div>
<div class="sequencer">
<div class="d1">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d2">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d3">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d4" id="d-split">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d5">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d6">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d7">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d8" id="d-split">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d9">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d10">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d11">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d12" id="d-split">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d13">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d14">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d15">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
<div class="d16">
<div class="sample" data-sample="kick.wav"></div>
<div class="sample" data-sample="clap.wav"></div>
<div class="sample" data-sample="hihat.wav"></div>
<div class="sample" data-sample="rim.wav"></div>
</div>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>