JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

document.addEventListener('keydown', function(e) {
  var audio, div, temp = document.querySelectorAll('[data-key="' + e.keyCode + '"]').forEach(function(f) {
    if (f.tagName.toLowerCase() == "audio") audio = f;
    if (f.tagName.toLowerCase() == "div") div = f;
  });
  if (audio) {
    div.className += " playing";
    audio.load();
    audio.play();
  }
})

document.querySelectorAll('audio').forEach(function(e) {
  e.addEventListener('ended', function(f) {
    var d = document.querySelector('div[data-key="' + e.attributes['data-key'].value + '"]');
    return function() {
      d.classList.remove('playing');
    };

  }());
})