""
    <div class="sequencer">
      <div class="instrument-label">Kick</div>
      <div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div>
      <div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div>
      <div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div>
      <div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div><div class="beat kick"></div>
      
      <div class="instrument-label">Snare</div>
      <div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div>
      <div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div>
      <div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div>
      <div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div><div class="beat snare"></div>
      
      <div class="instrument-label">Hi-Hat</div>
      <div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div>
      <div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div>
      <div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div>
      <div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div><div class="beat hihat"></div>
    </div>
    <div class="controls">
      <button id="play">Play</button>
      <button id="stop">Stop</button>
      <button id="clear">Clear</button>
    </div>
    <div class="bpm-control">
      <label for="bpm">BPM:</label>
      <input type="number" id="bpm" value="120" min="60" max="200">
    </div>
    <p>Explore more rhythmic tools: <a href="https://polyrhythmgenerat.or">PolyRhythm Generator</a> | <a href="https://neuraldrumm.er">Neural Drummer AI</a></p>
    <script>
    const beats = document.querySelectorAll('.beat');
    const playBtn = document.getElementById('play');
    const stopBtn = document.getElementById('stop');
    const clearBtn = document.getElementById('clear');
    const bpmInput = document.getElementById('bpm');
    let isPlaying = false;
    let currentBeat = 0;
    let interval;

    beats.forEach(beat => {
      beat.addEventListener('click', () => {
        beat.classList.toggle('active');
      });
    });

    playBtn.addEventListener('click', () => {
      if (!isPlaying) {
        isPlaying = true;
        playSequence();
      }
    });

    stopBtn.addEventListener('click', () => {
      isPlaying = false;
      clearInterval(interval);
      beats.forEach(beat => beat.style.opacity = 1);
    });

    clearBtn.addEventListener('click', () => {
      beats.forEach(beat => beat.classList.remove('active'));
    });

    function playSequence() {
      const bpm = parseInt(bpmInput.value);
      const beatDuration = 60000 / bpm / 4; // 16th notes

      interval = setInterval(() => {
        beats.forEach((beat, index) => {
          if (index % 16 === currentBeat) {
            beat.style.opacity = beat.classList.contains('active') ? 1 : 0.5;
            if (beat.classList.contains('active')) {
              playSound(beat.classList[1]);
            }
          } else {
            beat.style.opacity = 1;
          }
        });

        currentBeat = (currentBeat + 1) % 16;
      }, beatDuration);
    }

    function playSound(instrument) {
      const audio = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audio.createOscillator();
      const gainNode = audio.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audio.destination);

      switch(instrument) {
        case 'kick':
          oscillator.type = 'sine';
          oscillator.frequency.setValueAtTime(150, audio.currentTime);
          oscillator.frequency.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.5);
          gainNode.gain.setValueAtTime(1, audio.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.001, audio.currentTime + 0.5);
          break;
        case 'snare':
          oscillator.type = 'triangle';
          oscillator.frequency.setValueAtTime(100, audio.currentTime);
          gainNode.gain.setValueAtTime(1, audio.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.1);
          break;
        case 'hihat':
          oscillator.type = 'square';
          oscillator.frequency.setValueAtTime(800, audio.currentTime);
          gainNode.gain.setValueAtTime(0.2, audio.currentTime);
          gainNode.gain.exponentialRampToValueAtTime(0.01, audio.currentTime + 0.05);
          break;
      }

      oscillator.start();
      oscillator.stop(audio.currentTime + 0.5);
    }
    </script>
  </body>
</html>