Skip to content

Commit b4d471d

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1507 from Avdhesh-Varshney/piano
[SSoC 2.0] Playable Piano Project Completed
2 parents 4915cc1 + 3af6257 commit b4d471d

24 files changed

Lines changed: 348 additions & 0 deletions

File tree

‎Projects/Playable_Piano/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# **PLAYABLE PIANO**
2+
3+
---
4+
5+
6+
## **Description 📃**
7+
- This project made by using HTML, CSS and JS.
8+
- This project is a beginner friendly and helpful who are new to frontend technology.
9+
- Piano project is responsive even for the mobile devices.
10+
- Press the buttons from the keyboard or just click on the keys of piano will show the effect of pressing and producing respective buttons sound.
11+
12+
<br>
13+
14+
15+
## **Tech Stack 🎮**
16+
- HTML
17+
- CSS
18+
- JS
19+
20+
<br>
21+
22+
23+
## **Screenshot 📸**
24+
25+
![Playable_Piano](https://github.com/TusharKesarwani/Front-End-Projects/assets/114330097/5d93ea97-c34a-4d61-922c-7d414604a57b)
26+
27+
<br>
28+
29+
30+
## **Creator 👦**
31+
32+
[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
33+
34+

‎Projects/Playable_Piano/favicon.ico‎

15 KB
Binary file not shown.

‎Projects/Playable_Piano/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Logo of the website -->
9+
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
10+
11+
<!-- Title of the project -->
12+
<title>PLAYABLE PIANO</title>
13+
14+
<!-- Stylesheet of the project -->
15+
<link rel="stylesheet" href="./style.css">
16+
17+
<!-- Main javascript file of the project -->
18+
<script src="./script.js" defer></script>
19+
</head>
20+
21+
<body>
22+
<!-- Main container of the project -->
23+
<div class="wrapper">
24+
<header>
25+
<h1>PLAYABLE PIANO</h1>
26+
<!-- Volume controls for the user -->
27+
<div class="column volume-slider">
28+
<span>Volume</span>
29+
<input type="range" min="0" max="1" value="0.5" step="any">
30+
</div>
31+
32+
<div class="column keys-checkbox">
33+
<span>Show Keys</span>
34+
<input type="checkbox" checked>
35+
</div>
36+
</header>
37+
38+
<!-- Piano board -->
39+
<ul class="piano-keys">
40+
<!-- Piano keys -->
41+
<li class="key white" data-key="a"><span>a</span></li>
42+
<li class="key black" data-key="w"><span>w</span></li>
43+
<li class="key white" data-key="s"><span>s</span></li>
44+
<li class="key black" data-key="e"><span>e</span></li>
45+
<li class="key white" data-key="d"><span>d</span></li>
46+
<li class="key white" data-key="f"><span>f</span></li>
47+
<li class="key black" data-key="t"><span>t</span></li>
48+
<li class="key white" data-key="g"><span>g</span></li>
49+
<li class="key black" data-key="y"><span>y</span></li>
50+
<li class="key white" data-key="h"><span>h</span></li>
51+
<li class="key black" data-key="u"><span>u</span></li>
52+
<li class="key white" data-key="j"><span>j</span></li>
53+
<li class="key white" data-key="k"><span>k</span></li>
54+
<li class="key black" data-key="o"><span>o</span></li>
55+
<li class="key white" data-key="l"><span>l</span></li>
56+
<li class="key black" data-key="p"><span>p</span></li>
57+
<li class="key white" data-key=";"><span>;</span></li>
58+
</ul>
59+
</div>
60+
61+
</body>
62+
63+
</html>

‎Projects/Playable_Piano/script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Declaring global variables
2+
const pianoKeys = document.querySelectorAll(".piano-keys .key");
3+
const volumeSlider = document.querySelector(".volume-slider input");
4+
const keysCheckbox = document.querySelector(".keys-checkbox input");
5+
6+
// Initialising variables
7+
let allKeys = [];
8+
let audio = new Audio();
9+
10+
// function play the tunes of the different buttons on click
11+
const playTune = (key) => {
12+
// Audio controls
13+
audio.src = `./tunes/${key}.wav`;
14+
audio.play();
15+
const clickedKey = document.querySelector(`[data-key="${key}"]`);
16+
clickedKey.classList.add("active");
17+
setTimeout(() => {
18+
clickedKey.classList.remove("active");
19+
}, 150);
20+
}
21+
22+
// Mouse click functioning
23+
pianoKeys.forEach(key => {
24+
allKeys.push(key.dataset.key);
25+
key.addEventListener("click", () => playTune(key.dataset.key));
26+
});
27+
28+
// function to hide the keys labels
29+
const showHideKeys = () => {
30+
pianoKeys.forEach(key => key.classList.toggle("hide"));
31+
}
32+
33+
// Keyboard buttons press functioning
34+
const pressedKey = (e) => {
35+
if (allKeys.includes(e.key)) playTune(e.key);
36+
}
37+
38+
// function to control the volume of the game
39+
const handleVolume = (e) => {
40+
audio.volume = e.target.value;
41+
}
42+
43+
// Adding functioning to the different variables
44+
keysCheckbox.addEventListener("click", showHideKeys);
45+
volumeSlider.addEventListener("input", handleVolume);
46+
document.addEventListener("keydown", pressedKey);

‎Projects/Playable_Piano/style.css‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
/* Default settings */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: 'Poppins', sans-serif;
9+
}
10+
11+
body {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
min-height: 100vh;
16+
background-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
17+
}
18+
19+
/* Main heading of the game */
20+
.wrapper {
21+
padding: 35px 40px;
22+
border-radius: 20px;
23+
background: #000080;
24+
}
25+
26+
.wrapper header {
27+
display: flex;
28+
color: #B2B2B2;
29+
align-items: center;
30+
justify-content: space-between;
31+
}
32+
33+
header h1 {
34+
font-size: 1.6rem;
35+
}
36+
37+
header .column {
38+
display: flex;
39+
align-items: center;
40+
}
41+
42+
header span {
43+
font-weight: 500;
44+
margin-right: 15px;
45+
font-size: 1.19rem;
46+
}
47+
48+
header input {
49+
outline: none;
50+
border-radius: 30px;
51+
}
52+
53+
/* Styling the volume slider */
54+
.volume-slider input {
55+
accent-color: #fff;
56+
}
57+
58+
/* Adding styling into the checkbox button */
59+
.keys-checkbox input {
60+
height: 30px;
61+
width: 60px;
62+
cursor: pointer;
63+
appearance: none;
64+
position: relative;
65+
background: #4B4B4B
66+
}
67+
68+
.keys-checkbox input::before {
69+
content: "";
70+
position: absolute;
71+
top: 50%;
72+
left: 5px;
73+
width: 20px;
74+
height: 20px;
75+
border-radius: 50%;
76+
background: #8c8c8c;
77+
transform: translateY(-50%);
78+
transition: all 0.3s ease;
79+
}
80+
81+
.keys-checkbox input:checked::before {
82+
left: 35px;
83+
background: #fff;
84+
}
85+
86+
/* CSS styling of the piano keys */
87+
.piano-keys {
88+
display: flex;
89+
list-style: none;
90+
margin-top: 40px;
91+
}
92+
93+
.piano-keys .key {
94+
cursor: pointer;
95+
user-select: none;
96+
position: relative;
97+
text-transform: uppercase;
98+
}
99+
100+
.piano-keys .black {
101+
z-index: 2;
102+
width: 44px;
103+
height: 140px;
104+
margin: 0 -22px 0 -22px;
105+
border-radius: 0 0 5px 5px;
106+
background: linear-gradient(#333, #000080);
107+
}
108+
109+
.piano-keys .black.active {
110+
box-shadow: inset -5px -10px 10px rgba(255, 255, 255, 0.1);
111+
background: linear-gradient(to bottom, #000080, #434343);
112+
}
113+
114+
.piano-keys .white {
115+
height: 230px;
116+
width: 70px;
117+
border-radius: 8px;
118+
border: 1px solid #000;
119+
background: linear-gradient(#fff 96%, #eee 4%);
120+
}
121+
122+
.piano-keys .white.active {
123+
box-shadow: inset -5px 5px 20px rgba(0, 0, 0, 0.2);
124+
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
125+
}
126+
127+
.piano-keys .key span {
128+
position: absolute;
129+
bottom: 20px;
130+
width: 100%;
131+
color: #A2A2A2;
132+
font-size: 1.13rem;
133+
text-align: center;
134+
}
135+
136+
.piano-keys .key.hide span {
137+
display: none;
138+
}
139+
140+
.piano-keys .black span {
141+
bottom: 13px;
142+
color: #888888;
143+
}
144+
145+
/* Responsiveness for the tablet sized devices */
146+
@media screen and (max-width: 815px) {
147+
.wrapper {
148+
padding: 25px;
149+
}
150+
151+
header {
152+
flex-direction: column;
153+
}
154+
155+
header :where(h2, .column) {
156+
margin-bottom: 13px;
157+
}
158+
159+
.volume-slider input {
160+
max-width: 100px;
161+
}
162+
163+
.piano-keys {
164+
margin-top: 20px;
165+
}
166+
167+
.piano-keys .key:where(:nth-child(9), :nth-child(10)) {
168+
display: none;
169+
}
170+
171+
.piano-keys .black {
172+
height: 100px;
173+
width: 40px;
174+
margin: 0 -20px 0 -20px;
175+
}
176+
177+
.piano-keys .white {
178+
height: 180px;
179+
width: 60px;
180+
}
181+
}
182+
183+
/* Responsiveness for the mobile devices */
184+
@media screen and (max-width: 615px) {
185+
186+
.piano-keys .key:nth-child(13),
187+
.piano-keys .key:nth-child(14),
188+
.piano-keys .key:nth-child(15),
189+
.piano-keys .key:nth-child(16),
190+
.piano-keys .key :nth-child(17) {
191+
display: none;
192+
}
193+
194+
.piano-keys .white {
195+
width: 50px;
196+
}
197+
}

‎Projects/Playable_Piano/tunes/;.wav‎

60.6 KB
Binary file not shown.

‎Projects/Playable_Piano/tunes/a.wav‎

60.5 KB
Binary file not shown.

‎Projects/Playable_Piano/tunes/d.wav‎

60.5 KB
Binary file not shown.

‎Projects/Playable_Piano/tunes/e.wav‎

60.5 KB
Binary file not shown.

‎Projects/Playable_Piano/tunes/f.wav‎

60.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)