drum2.js

const compareId = (a, b) => {
  const numberRegex = /\d+/;
  const aId = parseInt(a.id.match(numberRegex));
  const bId = parseInt(b.id.match(numberRegex));
  if (aId < bId) return -1;
  if (aId > bId) return 1;
  if (aId === bId) return 0;
}

document.querySelector('#synth').style.visibility='hidden'

const druma = document.querySelector('#druma');

let drumaFaces = Array
  .from(druma.children)
  .filter(child => child.id.startsWith('face'))
  .sort(compareId);

drumaFaces.forEach(face => { face.style.visibility='hidden'; })

let drumaHands = Array
  .from(druma.children)
  .filter(child => child.id.startsWith('ad'))
  .sort(compareId);

drumaHands.forEach(face => { face.style.visibility='hidden'; })

const drumaHandsStill = [druma.querySelector('#ahand_x5F_left'), druma.querySelector('#ahand_x5F_right')]; 

drumaHandsStill.forEach(face => { face.style.visibility='hidden'; })

let i = 0
let j = 0;
setInterval(() => {
  drumaFaces.forEach(face => { face.style.visibility='hidden'; })
  drumaFaces[i].style.visibility='visible';
  if(i % 2) {
    drumaHandsStill.forEach(handStill => { handStill.style.visibility='hidden'; })
    drumaHands[j].style.visibility = 'visible';
    drumaHands[j+1].style.visibility = 'visible';
  } else {
    drumaHandsStill.forEach(handStill => { handStill.style.visibility='visible'; })
    drumaHands.forEach(face => { face.style.visibility='hidden'; })
  }
  i++;
  j++;
  if (j == drumaHands.length/2) j = 0;
  if(i === drumaFaces.length) i = 0;
}, 250)