JavaScript-Piano/script.js at master · DukeCho38/JavaScript-Piano · GitHub

30 lines (25 loc) · 905 Bytes

const WHITE_KEYS = ['z', 'x', 'c', 'v', 'b', 'n', 'm']

const BLACK_KEYS = ['s', 'd', 'g', 'h', 'j']

const keys = document.querySelectorAll('.key')

const whiteKeys = document.querySelectorAll('.key.white')

const blackKeys = document.querySelectorAll('.key.black')

keys.forEach(key => {

key.addEventListener('click', () => playNote(key))

})

document.addEventListener('keydown', e => {

if (e.repeat) return

const key = e.key

const whiteKeyIndex = WHITE_KEYS.indexOf(key)

const blackKeyIndex = BLACK_KEYS.indexOf(key)

if (whiteKeyIndex > -1) playNote(whiteKeys[whiteKeyIndex])

if (blackKeyIndex > -1) playNote(blackKeys[blackKeyIndex])

})

function playNote(key) {

const noteAudio = document.getElementById(key.dataset.note)

noteAudio.currentTime = 0

noteAudio.play()

key.classList.add('active')

noteAudio.addEventListener('ended', () => {

key.classList.remove('active')

})

}

Expand file tree