Drumkit

Developer
Yang Li
Size
2,329 Kb
Views
36,432
  1. Drumkit Previews
  2. Drumkit HTML Codes
  3. Drumkit CSS Codes
  4. Drumkit JS Codes

How do I make an drumkit?

What is a drumkit? How do you make a drumkit? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Drumkit Previews
IQ Test

Drumkit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drumkit</title> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Keyboard Drum Set</h1>
<h3>No buttons pressed</h3>
<img src='http://vignette2.wikia.nocookie.net/scribblenauts/images/5/54/Drums.png/revision/latest?cb=20130414103634'></img>
<p><b>Q</b> for Crash</p>
<p><b>A</b> for Low Tom</p>
<p><b>S</b> for Mid Tom</p>
<p><b>D</b> for High Tom</p>
<p><b>F</b> for Snare</p>
<p><b>T</b> for Hi-Hat</p>
<p><b>X</b> for Kick Drum</p> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Drumkit - Script Codes CSS Codes

body { display: flex; flex-direction: column; align-items: center; font-family: 'Orbitron', sans-serif;
}
img { width: 350px;
}
b { color: red;
}

Drumkit - Script Codes JS Codes

// Code already written in starter but need to check for understanding:
var kick = new Audio('http://bit.ly/kickmp3');
var crash = new Audio('http://bit.ly/crashmp3');
var lowTom = new Audio('http://bit.ly/lowtommp3');
var midTom = new Audio('http://bit.ly/midtommp3');
var highTom = new Audio('http://bit.ly/hightommp3');
var snare = new Audio('http://bit.ly/snaremp3');
var hiHat = new Audio('http://bit.ly/hihatmp3');
// Students start coding here (teach them about keycodes)
const Q = 81;
const A = 65;
const S = 83;
const D = 68;
const F = 70;
const T = 84;
const X = 88;
$(document).keydown(function (event) { if (event.which == Q) { crash.play() $('img').animate({'width': '340' }, 20).animate({'width':'350'}, 20) $('h3').html('Crash button pressed'); } else if (event.which == A) { lowTom.play() $('img').animate({'width': '355' }, 20).animate({'width':'350'}, 20) $('h3').html('Low Tom button pressed'); } else if (event.which == S) { midTom.play() $('img').animate({'width': '355' }, 20).animate({'width':'350'}, 20) $('h3').html('Mid Tom button pressed'); } else if (event.which == D) { highTom.play() $('img').animate({'width': '355' }, 20).animate({'width':'350'}, 20) $('h3').html('High Tom button pressed'); } else if (event.which == F) { snare.play() $('img').animate({'width': '355' }, 20).animate({'width':'350'}, 20) $('h3').html('Snare button pressed'); } else if (event.which == T) { hiHat.play() $('img').animate({'width': '355' }, 20).animate({'width':'350'}, 20) $('h3').html('Hi-hat button pressed'); } else if (event.which == X) { kick.play() $('img').animate({'width': '355'},20).animate({'width':'350'},20) $('h3').html('Kick drum button pressed'); }
});
Drumkit - Script Codes
Drumkit - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,329 Kb
Views 36,432
Do you need developer help for Drumkit?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
Responding Boxes Starter
Progress Bar
Goalkeeper
My Friends Starter
Sunny Day Driving Starter
Googly Eye
Animated Clock
Highlight Me Starter
Animated Clock Starter
Recreate Google Starter
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!