├── index.html ├── notes ├── A.mp3 ├── Ab.mp3 ├── B.mp3 ├── Bb.mp3 ├── C.mp3 ├── D.mp3 ├── Db.mp3 ├── E.mp3 ├── Eb.mp3 ├── F.mp3 ├── G.mp3 └── Gb.mp3 ├── script.js └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Piano 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /notes/A.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/A.mp3 -------------------------------------------------------------------------------- /notes/Ab.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/Ab.mp3 -------------------------------------------------------------------------------- /notes/B.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/B.mp3 -------------------------------------------------------------------------------- /notes/Bb.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/Bb.mp3 -------------------------------------------------------------------------------- /notes/C.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/C.mp3 -------------------------------------------------------------------------------- /notes/D.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/D.mp3 -------------------------------------------------------------------------------- /notes/Db.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/Db.mp3 -------------------------------------------------------------------------------- /notes/E.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/E.mp3 -------------------------------------------------------------------------------- /notes/Eb.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/Eb.mp3 -------------------------------------------------------------------------------- /notes/F.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/F.mp3 -------------------------------------------------------------------------------- /notes/G.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/G.mp3 -------------------------------------------------------------------------------- /notes/Gb.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/JavaScript-Piano/21426141512b2e14b1846dfd14bf297e87c46373/notes/Gb.mp3 -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const WHITE_KEYS = ['z', 'x', 'c', 'v', 'b', 'n', 'm'] 2 | const BLACK_KEYS = ['s', 'd', 'g', 'h', 'j'] 3 | 4 | const keys = document.querySelectorAll('.key') 5 | const whiteKeys = document.querySelectorAll('.key.white') 6 | const blackKeys = document.querySelectorAll('.key.black') 7 | 8 | keys.forEach(key => { 9 | key.addEventListener('click', () => playNote(key)) 10 | }) 11 | 12 | document.addEventListener('keydown', e => { 13 | if (e.repeat) return 14 | const key = e.key 15 | const whiteKeyIndex = WHITE_KEYS.indexOf(key) 16 | const blackKeyIndex = BLACK_KEYS.indexOf(key) 17 | 18 | if (whiteKeyIndex > -1) playNote(whiteKeys[whiteKeyIndex]) 19 | if (blackKeyIndex > -1) playNote(blackKeys[blackKeyIndex]) 20 | }) 21 | 22 | function playNote(key) { 23 | const noteAudio = document.getElementById(key.dataset.note) 24 | noteAudio.currentTime = 0 25 | noteAudio.play() 26 | key.classList.add('active') 27 | noteAudio.addEventListener('ended', () => { 28 | key.classList.remove('active') 29 | }) 30 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #143F6B; 7 | margin: 0; 8 | min-height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | .piano { 15 | display: flex; 16 | } 17 | 18 | .key { 19 | height: calc(var(--width) * 4); 20 | width: var(--width); 21 | } 22 | 23 | .white { 24 | --width: 100px; 25 | background-color: white; 26 | border: 1px solid #333; 27 | } 28 | 29 | .white.active { 30 | background-color: #CCC; 31 | } 32 | 33 | .black { 34 | --width: 60px; 35 | background-color: black; 36 | margin-left: calc(var(--width) / -2); 37 | margin-right: calc(var(--width) / -2); 38 | z-index: 2; 39 | } 40 | 41 | .black.active { 42 | background-color: #333; 43 | } --------------------------------------------------------------------------------