strumming-metronome/src/index.js

A simple JavaScript metronome for strumming practice.

import { metronomeContainerHTML } from './constants.js';
import { injectStyles } from './styles.js';
import { loadStrumSounds, unlockAudio } from './audio.js';
import { createMetronomeEngine } from './metronome-engine.js';

export default function createMetronome() {
  document.addEventListener('touchstart', unlockAudio, false);
  
  loadStrumSounds();

  injectStyles();

  const container = document.querySelector("#metronome-container");
  container.innerHTML = metronomeContainerHTML;

  const timeSignature = container.querySelector("#metronome-time-signature");
  const subdivision = container.querySelector("#metronome-subdivision");

  function updateSubdivisionVisibility() {
    const timeValue = timeSignature.value;
    const subdivisionDiv = container.querySelector("#metronome-subdivision-field");
    
    if (timeValue === "68") {
      subdivisionDiv.style.display = "none";
      subdivision.value = "sixteenth";
    } else {
      subdivisionDiv.style.display = "";
    }
  }

  function recreateEngine() {
    const timeValue = timeSignature.value;
    const subdivisionValue = subdivision.value;
    let engineKey = timeValue;
    
    if ((timeValue === "44" || timeValue === "34") && subdivisionValue === "triplet") {
      engineKey = `${timeValue}-triplet`;
    }
    
    createMetronomeEngine(engineKey);
  }

  timeSignature.addEventListener("change", function () {
    updateSubdivisionVisibility();
    recreateEngine();
  });

  subdivision.addEventListener("change", recreateEngine);

  updateSubdivisionVisibility();
  recreateEngine();
}