Instrument

 avatar
unknown
plain_text
2 years ago
1.1 kB
3
Indexable
// Object to map keys to sound URLs
const keySoundMap = {
  'w': 'Sound1', // replace 'Sound1' with the actual URL of the sound
  'a': 'Sound2', // replace 'Sound2' with the actual URL of the sound
  's': 'Sound3', // replace 'Sound3' with the actual URL of the sound
  'd': 'Sound4', // replace 'Sound4' with the actual URL of the sound
  'j': 'Sound5', // replace 'Sound5' with the actual URL of the sound
  'k': 'Sound6', // replace 'Sound6' with the actual URL of the sound
  'l': 'Sound7'  // replace 'Sound7' with the actual URL of the sound
};

// Function to play sound based on key
function playSound(key) {
  const soundUrl = keySoundMap[key];
  if (soundUrl) {
    const audio = new Audio(soundUrl);
    audio.play();
  }
}

// Add click event listeners to all buttons
const buttons = document.querySelectorAll('.drum');
buttons.forEach(button => {
  button.addEventListener('click', function() {
    const key = this.textContent;
    playSound(key);
  });
});

// Add keypress event listener to the whole document
document.addEventListener('keypress', function(event) {
  const key = event.key.toLowerCase();
  playSound(key);
});
Editor is loading...
Leave a Comment