CERTIFICATE COURSE

on

Academic Year
(FROM TO )

DEPARTMENT OF TELUGU
SRNK GOVT. DEGREE COLLEGE, BANSWADA
KAMAREDDY(Dist.)
 Guided By
(NAAC ACCREDITED WITH ‘B’ GRADE)
Department of Computer Science

CERTIFICATE

This is to certify that D. SAI KUMAR, R. PRASAD, K.SAI

KIRAN, B.NAGABHAVANI,M.NAGESHWARI & K. NAMDEV studying
in B.Sc. Computer Science (Optional) – IIIrd year (Semester –
VIth) has been completed the Project Report on “Drum Kit” as per
the requirement of syllabus and this record contain Very Good
work and completed by themselves in academic year 2021 – 2022.

Date : / /
Place: Banswada

In charge Head of Department

1
 Acknowledgement

“It is not possible to prepare Project and Project Report without

encouragement of other people. This one is certainly no exception”.
On the very outset of this report, I would like to extend my sincere
and heartfelt obligation towards the entire personage who has
helped me in this endeavor. Without their active guidance, help, co-
operation and encouragement, we would not have made headway in
the Report.
We are great thankful to Department of Computers, SRNK GDC
Banswada for conscientious help and encouragement to accomplish
this Project.
We are extremely thankful and pay our gratitude to our faculty
Department of Computer Science for valuable guidance and
support on completion of this Project and its Report in it are
presently.
We are also extending our gratitude to Principal, Dr. I.Gangadhar
SRNK GDC Banswada for giving this opportunity to us.
we also acknowledging with our gratitude towards our parents
and family members, who has always supported to me morally as
well as economically.
At last but not least gratitude goes to all friends who helped
directly or indirectly to us for complete this Project and Project
Report.

2
 Thanking you
Index

Sr. No. Title Page No.

01 Introduction

02 Introduction to HTML and

03 Cascading style sheets(css)

04 Introduction to Visual code

03 System Requirements
6.1 Hardware Requirements
6.2 Software Requirements

04 Coding

05 Testing

06 Screen Shots

07 Advantages

08 Disadvantages

09 Future Enhancement

10 Conclusion

11 References

3
 Introduction

A drum kit – also called a drum set, trap set (an

abbreviation of the word "contraption") or simply drums – is a
collection of drums, cymbals and other percussion instruments,
which are set up on stands to be played by a single
player, with drumsticks held in both hands and the feet operating
pedals that control the hi-hat cymbal and the beater for the bass
drum. Sometimes, there may be two bass drum pedals to create a
faster rhythm. A drum kit consists of a mix of drums (categorized
classically as membrano phones, Hornbostel-Sachs high-level
classification 2) and idiophones – most significantly cymbals, but
can also include the woodblock and cowbell (classified as
Hornbostel-Sachs high-level classification 1). In the 2020s, some
kits also include electronic instruments (Hornbostel-Sachs
classification 53). Also, both hybrid (mixing acoustic instruments
and electronic drums) and entirely electronic kits are used.
A standard modern kit (in a right-handed configuration) contains:

 A snare drum, mounted on a stand, placed between the player's

knees and played with drum sticks (which may
include rutes or brushes)
 A bass drum, played by a pedal operated by the right foot, which
moves a felt-covered beater
 Two or more toms, played with sticks or brushes.
 A hi-hat (two cymbals mounted on a stand), played with the
sticks, opened and closed with left foot pedal (it can also produce
sound with the foot alone)
 One or more cymbals, mounted on stands, played with the sticks
All of these are classified as non-pitched percussion, allowing
the music to be scored using percussion notation, for which a loose
semi-standardized form exists for both the drum kit and electronic
drums. The drum kit is usually played while seated on a stool
known as a throne. While many instruments like
the guitar or piano are capable of performing melodies and chords,
most drum kits are unable to achieve this as they produce sounds
of indeterminate pitch. The drum kit is a part of the
4
standard rhythm section, used in many types of popular
and traditional music  styles, ranging
from rock and pop to blues and jazz. Other standard instruments
used in the rhythm section include the piano, electric
guitar, electric bass, and keyboards.

Many drummers extend their kits from this basic configuration,

adding more drums, more cymbals, and many other instruments
including pitched percussion. In some styles of music, particular
extensions are normal. For example, some rock and heavy metal
drummers make use of double bass drums, which can be achieved
with either a second bass drum or a remote double foot
pedal. Some progressive drummers may include orchestral
percussion such as gongs and tubular bells in their rig. Some
performers, such as some rockabilly and funk drummers,
play small kits that omit elements from the basic setup.

Introduction of HTML
5
The HyperText Markup Language or HTML is the
standard markup language for documents designed to be displayed
in a web browser. It can be assisted by technologies such
as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.
Web browsers receive HTML documents from a web server or from
local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may
be embedded into the rendered page. HTML provides a means to
create structured documents by denoting structural semantics for
text such as headings, paragraphs, lists, links, quotes and other
items. HTML elements are delineated by tags, written using angle
brackets. Tags such as  <img/>  and  <input />  directly introduce
content into the page. Other tags such as  <p>  surround and
provide information about document text and may include other
tags as sub-elements. Browsers do not display the HTML tags but
use them to interpret the content of the page.
HTML can embed programs written in a scripting language such
as JavaScript, which affects the behavior and content of web pages.
Inclusion of CSS defines the look and layout of content. The World
Wide Web Consortium (W3C), former maintainer of the HTML and
current maintainer of the CSS standards, has encouraged the use
of CSS over explicit presentational HTML since 1997. A form of
HTML, known as HTML5, is used to display video and audio,
primarily using the  <canvas>  element, in collaboration with
javascript.

History

6
Tim Berners-Lee in April 2009
In 1980, physicist Tim Berners-Lee, a contractor at CERN,
proposed and prototyped ENQUIRE, a system for CERN researchers
to use and share documents. In 1989, Berners-Lee wrote a memo
proposing an Internet-based hypertext system. Berners-Lee
specified HTML and wrote the browser and server software in late
1990. That year, Berners-Lee and CERN data
systems engineer Robert Cailliau collaborated on a joint request for
funding, but the project was not formally adopted by CERN. In his
personal notes from 1990 he listed] "some of the many areas in
which hypertext is used" and put an encyclopedia first.
The first publicly available description of HTML was a document
called "HTML Tags", first mentioned on the Internet by Tim Berners-
Lee in late 1991. It describes 18 elements comprising the initial,
relatively simple design of HTML. Except for the hyperlink tag, these
were strongly influenced by SGMLguid, an in-house Standard
Generalized Markup Language (SGML)-based documentation format
at CERN. Eleven of these elements still exist in HTML 4.
HTML is a markup language that web browsers use to interpret
and compose text, images, and other material into visual or audible
web pages. Default characteristics for every item of HTML markup
are defined in the browser, and these characteristics can be altered
or enhanced by the web page designer's additional use of CSS.
Many of the text elements are found in the 1988 ISO technical
report TR 9537 Techniques for using SGML, which in turn covers the
features of early text formatting languages such as that used by
the RUNOFF command developed in the early 1960s for
the CTSS (Compatible Time-Sharing System) operating system:
these formatting commands were derived from the commands used
by typesetters to manually format documents. However, the SGML
concept of generalized markup is based on elements (nested
annotated ranges with attributes) rather than merely print effects,
with also the separation of structure and markup; HTML has been
progressively moved in this direction with CSS.

7
Berners-Lee considered HTML to be an application of SGML. It was
formally defined as such by the Internet Engineering Task
Force (IETF) with the mid-1993 publication of the first proposal for
an HTML specification, the "Hypertext Markup Language (HTML)"
Internet Draft by Berners-Lee and Dan Connolly, which included an
SGML Document type definition to define the grammar.The draft
expired after six months, but was notable for its acknowledgment of
the NCSA Mosaic browser's custom tag for embedding in-line
images, reflecting the IETF's philosophy of basing standards on
successful prototypes. Similarly, Dave Raggett's competing Internet-
Draft, "HTML+ (Hypertext Markup Format)", from late 1993,
suggested standardizing already-implemented features like tables
and fill-out forms.
After the HTML and HTML+ drafts expired in early 1994, the IETF
created an HTML Working Group, which in 1995 completed "HTML
2.0", the first HTML specification intended to be treated as a
standard against which future implementations should be based.
Further development under the auspices of the IETF was stalled by
competing interests. Since 1996, the HTML specifications have been
maintained, with input from commercial software vendors, by
the World Wide Web Consortium (W3C). However, in 2000, HTML
also became an international standard (ISO/IEC 15445:2000).
HTML 4.01 was published in late 1999, with further errata
published through 2001. In 2004, development began on HTML5 in
the Web Hypertext Application Technology Working
Group (WHATWG), which became a joint deliverable with the W3C
in 2008, and completed and standardized on 28 October 2014.
HTML versions timeline

HTML 2
November 24, 1995
HTML 2.0 was published as RFC 1866.
Supplemental RFCs added capabilities:

 November 25, 1995: RFC 1867 (form-based file upload)

 May 1996: RFC 1942 (tables)
 August 1996: RFC 1980 (client-side image maps)

8
  January 1997: RFC 2070 (internationalization)
HTML 3
January 14, 1997
HTML 3.2 was published as a W3C Recommendation. It was
the first version developed and standardized exclusively by the
W3C, as the IETF had closed its HTML Working Group on
September 12, 1996.
Initially code-named "Wilbur", HTML 3.2 dropped math
formulas entirely, reconciled overlap among various
proprietary extensions and adopted most of Netscape's visual
markup tags. Netscape's blink
element and Microsoft's marquee element were omitted due to
a mutual agreement between the two companies. A markup for
mathematical formulas similar to that in HTML was not
standardized until 14 months later in MathML.
HTML 4
December 18, 1997
HTML 4.0 was published as a W3C Recommendation. It offers
three variations:

 Strict, in which deprecated elements are forbidden

 Transitional, in which deprecated elements are allowed
 Frameset, in which mostly only frame related elements are
allowed.
Initially code-named "Cougar", HTML 4.0 adopted many
browser-specific element types and attributes, but at the same
time sought to phase out Netscape's visual markup features
by marking them as deprecated in favor of style sheets. HTML
4 is an SGML application conforming to ISO 8879 – SGML.
April 24, 1998
HTML 4.0 was reissued with minor edits without incrementing
the version number.
December 24, 1999
HTML 4.01 was published as a W3C Recommendation. It
offers the same three variations as HTML 4.0 and its
last errata were published on May 12, 2001.

9
May 2000
ISO/IEC 15445:2000 ("ISO HTML", based on HTML 4.01
Strict) was published as an ISO/IEC international standard. In
the ISO this standard falls in the domain of the ISO/IEC
JTC1/SC34 (ISO/IEC Joint Technical Committee 1,
Subcommittee 34 – Document description and processing
languages).
After HTML 4.01, there was no new version of HTML for many
years as development of the parallel, XML-based language
XHTML occupied the W3C's HTML Working Group through the
early and mid-2000s.
HTML 5
Main article: HTML5
October 28, 2014
HTML5 was published as a W3C Recommendation.
November 1, 2016
HTML 5.1 was published as a W3C Recommendation.
December 14, 2017
HTML 5.2 was published as a W3C Recommendation.

Cascading style sheets(css)

Cascading Style Sheets (CSS) is a style sheet language used for

describing the presentation of a document written in a markup
language such as HTML. CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and
content, including layout, colors, and fonts. This separation can
improve content accessibility; provide more flexibility and control in
the specification of presentation characteristics; enable
multiple web pages to share formatting by specifying the relevant

10
CSS in a separate .css file, which reduces complexity and repetition
in the structural content; and enable the .css file to be cached to
improve the page load speed between the pages that share the file
and its formatting.
Separation of formatting and content also makes it feasible to
present the same markup page in different styles for different
rendering methods, such as on-screen, in print, by voice (via
speech-based browser or screen reader), and on Braille-
based tactile devices. CSS also has rules for alternate formatting if
the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to
determine which style rule applies if more than one rule matches a
particular element. This cascading priority scheme is predictable.
The CSS specifications are maintained by the World Wide Web
Consortium (W3C). Internet media type (MIME type)  text/css  is
registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents.
In addition to HTML, other markup languages support the use of
CSS including XHTML, plain XML, SVG, and XUL.

Introduction of visual code

Visual Studio Code was first announced on April 29, 2015, by

Microsoft at the 2015 Build conference. A preview build was
released shortly thereafter.
On November 18, 2015, the source of Visual Studio Code was
released under the MIT License, and made available on GitHub.
Extension support was also announced. On April 14, 2016, Visual
Studio Code graduated from the public preview stage and
was released to the Web. Microsoft has released most of Visual
Studio Code's source code on GitHub under the permissive MIT
License, while the releases by Microsoft are proprietary freeware.

11
Visual Studio Code is a source-code editor that can be used with a
variety of programming languages,
including Java, JavaScript, Go, Node.js, Python, C++ and Fortran. I
t is based on the Electron framework,  which is used to
develop Node.js Web applications that run on the Blink layout
engine. Visual Studio Code employs the same editor component
(codenamed "Monaco") used in Azure DevOps (formerly called
Visual Studio Online and Visual Studio Team Services).
Out of the box, Visual Studio Code includes basic support for most
common programming languages. This basic support
includes syntax highlighting, bracket matching, code folding, and
configurable snippets. Visual Studio Code also ships
with IntelliSense for JavaScript, TypeScript, JSON, CSS,
and HTML, as well as debugging support for Node.js. Support for
additional languages can be provided by freely available extensions
on the VS Code Marketplace.

System Requirements

Hardware requirements

Processor = Pentium
RAM = 3 GB
Hard disk = 64GB
Monitor = 15’’ Color monitor
Key Board = 122 keys

12
Software Requirements

Operating system = Windows 7

Language = HTML, CSS, Javascript
Editor = Visual studio code

Coding

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Drum Kit</title>
<link rel="stylesheet" href="style.css">
</head>

13
<body>
<h1></h1>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<audio controls>
<source src=" C:\Users\srnk\Desktop\Mystical-piano-
music.MP3" type="audio/ogg"></AUDIO>

<div data-key="83" class="key">

<kbd>S</kbd>
<span class="sound">hihat</span>
</div>

<div data-key="68" class="key">

<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<audio controls>
<source src=" C:\Users\srnk\Desktop\Mystical-kick-music.MP3"
type="audio/ogg"></AUDIO>

14
 <div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>

<div data-key="71" class="key">

<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<audio controls>
<source src=" C:\Users\srnk\Desktop\Mystical-boom-
music.MP3" type="audio/ogg"></AUDIO>

<div data-key="72" class="key">

<kbd>H</kbd>
<span class="sound">ride</span>
</div>

<div data-key="74" class="key">

<kbd>J</kbd>
<span class="sound">snare</span>
</div>

15
 <div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>

<div data-key="76" class="key">

<kbd>L</kbd>
<span class="sound">tink</span>
</div>
<audio controls>
<source src=" C:\Users\srnk\Desktop\Mystical-tink-music.MP3"
type="audio/ogg"></AUDIO>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>

<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>

16
 <audio data-key="76" src="sounds/tink.wav"></audio>

<script>
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}

function playSound(e) {
constaudio = document.querySelector(`audio[data-key="$
{e.keyCode}"]`);
constkey = document.querySelector(`div[data-key="$
{e.keyCode}"]`);
if (!audio) return;

key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}

const keys = Array.from(document.querySelectorAll('.key'));

keys.forEach(key => key.addEventListener('transitionend',
removeTransition));
window.addEventListener('keydown', playSound);
</script>
</body>

17
</html>

html {
font-size:20pix;
background: url('./background.jpg') center;
background-size: cover;
}

body,html {
margin: 0;
padding: 0;
font-family: sans-serif;
}

.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;

18
 }

.key {
border: .4rem solid black;
border-radius: .5rem;
margin: 1rem;
font-size: 1.5rem;
padding: 1rem .5rem;
transition: all .07s;
width: 10rem;
text-align: center;
color: white;
background: rgba(0,0,0,0.4);
text-shadow: 0 0 .5rem black;
}

.playing {
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
}

kbd {
display: block;
font-size: 4rem;
}

19
 .sound {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: .1rem;
color: #ffc600;
}

Testing

Testing in genral means validation and verification .It shows that

the system confirms to its specifications and system meets all
expectations of the user.

Mouse testing
When we stroke the corresponding key it display’s
successful output on screen.

Keyboard testing

20
 When we stroke the corresponding key it display’s successful
output on screen.

 All functions working properly

Screenshots

21
22
Advantages

1) Easy to use.
2) High speed performance.
3) Look and feel environment.
4) It has different sound functions.

Disadvantages

1) We can’t record audio, sounds

23
 Future enhancement

This web page project is created using HTML, CSS & JavaScript for
entertainment purpose.
Some features can be added they are as follows
1) More sound effects.
2) Different key shapes like circular, square, triangle ,etc.
3) Advanced graphical user interface.
4) Color of keys.
5) Mice and sound recording system.

24
 Conclusions

We have delivered a virtual drum set which not only makes

the proper sound when the user makes a hit on the key, but also
gives user a realistic drumming experience. At the expo, we
demonstrated the viability of the product and the ease of use.
Everybody who tried the prototype was easily able to learn how to
use the setup with minimal instruction. For example, a four year
old was able to pic up the sticks and play the drums within a few
seconds. In addition, other than some functionality issues with the
kick pedal, the product was robust and didn't fail during the entire
trial period. At most, we had to recalibrate the sticks by temporarily
removing them from the sensor's range. Regarding how to turn this
into a commercial product, our answer is: the software is ready for
commercial use, and we just need to polish and enclose our
mechanical parts to make them sales-ready. In some sense, we
have made a product already.

25
 Reference

www.google.com

www.wikipedia.com

Fl Studio

26