Skip to content

Commit 8c54093

Browse files
author
unknown
committed
pianoapp
1 parent f343b54 commit 8c54093

File tree

3 files changed

+257
-0
lines changed

3 files changed

+257
-0
lines changed

‎PianoApp/sanathan-git/index.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Piano</title>
8+
</head>
9+
<body>
10+
<body>
11+
<section id="wrap">
12+
<header>
13+
<h1>JS Piano</h1>
14+
<h2>Use your keyboard.</h2>
15+
</header>
16+
<section id="main">
17+
<div class="nowplaying"></div>
18+
<div class="keys">
19+
<div data-key="65" class="key" data-note="C">
20+
<span class="hints">A</span>
21+
</div>
22+
<div data-key="87" class="key sharp" data-note="C#">
23+
<span class="hints">W</span>
24+
</div>
25+
<div data-key="83" class="key" data-note="D">
26+
<span class="hints">S</span>
27+
</div>
28+
<div data-key="69" class="key sharp" data-note="D#">
29+
<span class="hints">E</span>
30+
</div>
31+
<div data-key="68" class="key" data-note="E">
32+
<span class="hints">D</span>
33+
</div>
34+
<div data-key="70" class="key" data-note="F">
35+
<span class="hints">F</span>
36+
</div>
37+
<div data-key="84" class="key sharp" data-note="F#">
38+
<span class="hints">T</span>
39+
</div>
40+
<div data-key="71" class="key" data-note="G">
41+
<span class="hints">G</span>
42+
</div>
43+
<div data-key="89" class="key sharp" data-note="G#">
44+
<span class="hints">Y</span>
45+
</div>
46+
<div data-key="72" class="key" data-note="A">
47+
<span class="hints">H</span>
48+
</div>
49+
<div data-key="85" class="key sharp" data-note="A#">
50+
<span class="hints">U</span>
51+
</div>
52+
<div data-key="74" class="key" data-note="B">
53+
<span class="hints">J</span>
54+
</div>
55+
<div data-key="75" class="key" data-note="C">
56+
<span class="hints">K</span>
57+
</div>
58+
<div data-key="79" class="key sharp" data-note="C#">
59+
<span class="hints">O</span>
60+
</div>
61+
<div data-key="76" class="key" data-note="D">
62+
<span class="hints">L</span>
63+
</div>
64+
<div data-key="80" class="key sharp" data-note="D#">
65+
<span class="hints">P</span>
66+
</div>
67+
<div data-key="186" class="key" data-note="E">
68+
<span class="hints">;</span>
69+
</div>
70+
</div>
71+
72+
<audio data-key="65" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio>
73+
<audio data-key="87" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio>
74+
<audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio>
75+
<audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio>
76+
<audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio>
77+
<audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio>
78+
<audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio>
79+
<audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio>
80+
<audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio>
81+
<audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio>
82+
<audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio>
83+
<audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio>
84+
<audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio>
85+
<audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio>
86+
<audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio>
87+
<audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio>
88+
<audio data-key="186" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio>
89+
</section>
90+
</section>
91+
<video playsinline autoplay muted loop id="bgvid" poster="http://carolinegabriel.com/demo/js-keyboard/video/bg.jpg">
92+
<source src="http://carolinegabriel.com/demo/js-keyboard/video/bg.mp4" type="video/mp4">
93+
</video>
94+
</body>
95+
<script src="main.js"></script>
96+
</body>
97+
</html>

‎PianoApp/sanathan-git/main.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const keys = document.querySelectorAll(".key"),
2+
note = document.querySelector(".nowplaying"),
3+
hints = document.querySelectorAll(".hints");
4+
5+
function playNote(e) {
6+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`),
7+
key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
8+
9+
if (!key) return;
10+
11+
const keyNote = key.getAttribute("data-note");
12+
13+
key.classList.add("playing");
14+
note.innerHTML = keyNote;
15+
audio.currentTime = 0;
16+
audio.play();
17+
}
18+
19+
function removeTransition(e) {
20+
if (e.propertyName !== "transform") return;
21+
this.classList.remove("playing");
22+
}
23+
24+
function hintsOn(e, index) {
25+
e.setAttribute("style", "transition-delay:" + index * 50 + "ms");
26+
}
27+
28+
hints.forEach(hintsOn);
29+
30+
keys.forEach(key => key.addEventListener("transitionend", removeTransition));
31+
32+
window.addEventListener("keydown", playNote);

‎PianoApp/sanathan-git/style.css

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
2+
html {
3+
background: #000;
4+
font-family: 'Varela Round', sans-serif;
5+
-webkit-font-smoothing: antialiased;
6+
text-align: center;
7+
}
8+
9+
video#bgvid {
10+
position: fixed;
11+
top: 50%;
12+
left: 50%;
13+
min-width: 100%;
14+
min-height: 100%;
15+
width: auto;
16+
height: auto;
17+
}
18+
19+
header {
20+
position: relative;
21+
margin: 25px 0;
22+
}
23+
24+
header:after {
25+
content: '';
26+
width: 460px;
27+
height: 15px;
28+
background: url(images/intro-div.svg) no-repeat center;
29+
display: inline-block;
30+
text-align: center;
31+
background-size: 70%;
32+
}
33+
34+
h1 {
35+
color: #fff;
36+
font-size: 50px;
37+
font-weight: 400;
38+
letter-spacing: 0.18em;
39+
text-transform: uppercase;
40+
margin: 0;
41+
}
42+
43+
h2 {
44+
color: #fff;
45+
font-size: 24px;
46+
font-weight: 400;
47+
margin: 0 0 30px;
48+
}
49+
.keys {
50+
display: block;
51+
width: 100%;
52+
height: 350px;
53+
max-width: 880px;
54+
position: relative;
55+
margin: 40px auto 0;
56+
cursor: none;
57+
}
58+
59+
.key {
60+
position: relative;
61+
border: 4px solid black;
62+
border-radius: .5rem;
63+
transition: all .07s ease;
64+
display: block;
65+
box-sizing: border-box;
66+
z-index: 2;
67+
}
68+
69+
.key:not(.sharp) {
70+
float: left;
71+
width: 10%;
72+
height: 100%;
73+
background: rgba(255, 255, 255, .8);
74+
}
75+
76+
.key.sharp {
77+
position: absolute;
78+
width: 6%;
79+
height: 60%;
80+
background: #000;
81+
color: #eee;
82+
top: 0;
83+
z-index: 3;
84+
}
85+
86+
.key[data-key="87"] {
87+
left: 7%;
88+
}
89+
90+
.key[data-key="69"] {
91+
left: 17%;
92+
}
93+
94+
.key[data-key="84"] {
95+
left: 37%;
96+
}
97+
98+
.key[data-key="89"] {
99+
left: 47%;
100+
}
101+
102+
.key[data-key="85"] {
103+
left: 57%;
104+
}
105+
106+
.key[data-key="79"] {
107+
left: 77%;
108+
}
109+
110+
.key[data-key="80"] {
111+
left: 87%;
112+
}
113+
114+
.playing {
115+
transform: scale(.95);
116+
border-color: #028ae9;
117+
box-shadow: 0 0 1rem #028ae9;
118+
}
119+
120+
.hints {
121+
display: block;
122+
width: 100%;
123+
opacity: 1;
124+
position: absolute;
125+
bottom: 7px;
126+
transition: opacity .3s ease-out;
127+
font-size: 20px;
128+
}

0 commit comments

Comments
 (0)