Okay, I need to build a single-page drum machine with a 16-step grid for kick, snare, hi-hat, and clap. All sounds must be synthesized using Web Audio API, and there should be play/stop buttons and an adjustable BPM. The entire thing has to be in one index.html file with inline CSS and JS, no external resources.

First, I'll outline the structure. The HTML should have a grid for the steps. Each instrument (kick, snare, etc.) will have its own row. Each step in the row is a clickable cell that toggles on/off. There will be controls for BPM and play/stop.

For the CSS, I'll style the grid to look like a drum machine. Maybe a table layout where rows are instruments and columns are steps. Each cell should be a square that changes color when active.

The JavaScript part is crucial. I need to use Web Audio API to generate the sounds. Each instrument will have its own oscillator or gain node setup. For example, kick drum might be a low sine wave with quick decay, snare could be noise with a filter.

The 16-step sequencer needs to loop. I'll use the AudioContext's currentTime to schedule the steps. The BPM determines the interval between steps. When play is pressed, the sequencer starts looping through the steps, triggering the active sounds.

I should create an array to hold the pattern for each instrument. Each row in the grid corresponds to an instrument, and each column is a step. Clicking a cell toggles the value in the pattern array.

BPM adjustment: a range input that updates the tempo. When BPM changes, the interval between steps recalculates.

Let me start drafting the HTML structure. A table with 4 rows (instruments) and 16 columns (steps). Each cell has an onclick to toggle its state. Controls below the grid for play/stop and BPM.

For CSS, make the grid cells square, maybe 30x30px. Active cells have a different background color. The table should be centered.

In JS, initialize the AudioContext. Set up the pattern as a 2D array: 4 instruments x 16 steps. Each instrument row has 16 steps (true/false).

On play, start the sequencer. Use setInterval or a recursive function with setTimeout, but better to use AudioContext's precise timing. Maybe use a loop that schedules the next step based on currentTime.

Wait, Web Audio API recommends using a lookahead approach. So have a timer that schedules events a few seconds ahead. But for simplicity, maybe use a setInterval that triggers every 60/(BPM*4) seconds (since 16 steps per measure, but BPM is beats per minute, so each step is a 16th note? Wait, BPM is usually quarter notes. So 16 steps would be 4 measures of 4/4, but maybe the user wants 16 steps as a loop, each step being a 16th note. So BPM is beats per minute where a beat is a quarter note. So each step is 1/4 beat. So the interval between steps is (60 / BPM) / 4 seconds.

For example, BPM 120: 60/120 = 0.5 seconds per beat, so each step is 0.125 seconds.

So the interval is (60 / BPM) / 4.

When play is pressed, start the sequencer. Use AudioContext.currentTime to schedule the next step. But to avoid drift, better to calculate the next step time based on the start time.

Alternatively, use a recursive function that schedules the next step after the current one.

Let me outline the JS steps:

1. Initialize AudioContext.
2. Create pattern array: 4x16, all false initially.
3. Set up the grid in HTML, bind click events to toggle pattern[i][j].
4. Play button starts the sequencer. Stop button stops it.
5. BPM input changes the interval.

For each instrument's sound:

- Kick: low sine wave, quick decay. Maybe a sine oscillator with exponential ramp down.
- Snare: noise generator (using buffer or oscillator with noise) with a filter.
- Hi-hat: high-frequency noise with quick decay.
- Clap: similar to snare but maybe different envelope.

Wait, Web Audio API doesn't have a built-in noise generator, but you can create one using a buffer. Alternatively, use an oscillator with a custom waveform, but that's complicated. A simpler way is to use a BufferSource with white noise.

But since we need to synthesize, maybe for simplicity, use oscillators with different waveforms and filters.

Alternatively, for kick: sine wave with frequency drop. Snare: pink noise through a filter.

But maybe to keep it simple, use basic oscillators with envelopes.

Let's define each instrument's sound function:

function playKick() {
  const osc = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  osc.type = 'sine';
  osc.frequency.setValueAtTime(150, audioContext.currentTime);
  osc.frequency.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
  gainNode.gain.setValueAtTime(1, audioContext.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
  osc.connect(gainNode);
  gainNode.connect(audioContext.destination);
  osc.start();
  osc.stop(audioContext.currentTime + 0.5);
}

Similarly for others, adjusting frequencies and decay times.

Now, the sequencer:

When play is pressed, start a loop that iterates through each step. For each step, check which instruments are active and trigger their sounds.

But need to schedule the sounds precisely. So for each step, calculate the time it should play, then schedule the sound at that time.

Let's have a variable currentStep that increments each time. The time for step n is startTime + n * interval.

But to avoid drift, better to calculate the next step time based on currentTime.

Wait, a common approach is to have a timer that schedules the next few steps ahead.

But for simplicity, maybe use setInterval with the interval time, but setInterval isn't precise. So better to use AudioContext's currentTime.

Alternative approach:

- When play is pressed, record the startTime as audioContext.currentTime.
- Then, for each step, calculate when it should play: startTime + (stepIndex * interval).
- But as the loop progresses, check the current time and trigger any steps that are due.

But this might require a recursive function that checks the current step.

Alternatively, use a loop that schedules the next step immediately after the current one.

Here's a possible sequencer function:

let isPlaying = false;
let currentStep = 0;
let interval = (60 / bpm) / 4; // time per step in seconds

function nextStep() {
  if (!isPlaying) return;

  // Trigger sounds for currentStep
  for (let i = 0; i < 4; i++) {
    if (pattern[i][currentStep]) {
      playSound(i);
    }
  }

  currentStep = (currentStep + 1) % 16;
  setTimeout(nextStep, interval * 1000);
}

But setTimeout isn't precise for audio, so better to use AudioContext's timing.

Another method:

Use a function that schedules the next step at the correct time using audioContext.currentTime.

function scheduleNextStep() {
  const currentTime = audioContext.currentTime;
  const nextStepTime = currentTime + interval;
  // Schedule the step at nextStepTime
  // Then call scheduleNextStep again after the interval
  // But need to handle the exact timing
}

Wait, perhaps using a loop that schedules each step in advance.

But given the constraints of a single HTML file and simplicity, maybe using setInterval is acceptable for a basic demo, even though it's not perfect. The user didn't specify high precision, so it's okay for a simple drum machine.

So, when play is pressed:

isPlaying = true;
currentStep = 0;
interval = (60 / bpm) / 4 * 1000; // in milliseconds

const intervalId = setInterval(() => {
  // Trigger sounds for currentStep
  for each active instrument in currentStep, play the sound
  currentStep = (currentStep + 1) % 16;
}, interval);

But setInterval might drift, but for a simple app, it's acceptable.

Now, putting it all together.

HTML structure:

- Table with id="grid", 4 rows, 16 columns.
- Each cell has class="step", data-instrument and data-step attributes.
- Buttons: play, stop, BPM input.

CSS:

- Style the grid, active cells highlighted.

JS:

- Initialize pattern as 4x16 array.
- On cell click, toggle pattern[instrument][step] and update cell class.
- Play button starts the interval, stop clears it.
- BPM input updates the interval.

Let me draft the code.

First, the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Drum Machine</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; }
    #grid { margin: 20px auto; border-collapse: collapse; }
    #grid td { width: 30px; height: 30px; border: 1px solid #000; cursor: pointer; }
    .active { background-color: #0f0; }
    .control { margin: 10px; }
  </style>
</head>
<body>
  <h1>16-Step Drum Machine</h1>
  <table id="grid"></table>
  <div class="control">
    <button id="play">Play</button>
    <button id="stop">Stop</button>
    <label>BPM: <input type="range" id="bpm" min="60" max="180" value="120"></label>
    <span id="bpmValue">120</span>
  </div>
  <script>
    // JS code here
  </script>
</body>
</html>

Now, the JS part.

Initialize the grid:

const grid = document.getElementById('grid');
const instruments = ['Kick', 'Snare', 'Hi-hat', 'Clap'];
const steps = 16;
const pattern = Array(4).fill().map(() => Array(steps).fill(false));

// Create rows and cells
instruments.forEach((name, i) => {
  const row = grid.insertRow();
  const header = row.insertCell();
  header.textContent = name;
  for (let j = 0; j < steps; j++) {
    const cell = row.insertCell();
    cell.dataset.instrument = i;
    cell.dataset.step = j;
    cell.addEventListener('click', () => {
      const active = pattern[i][j];
      pattern[i][j] = !active;
      cell.classList.toggle('active', !active);
    });
  }
});

Set up BPM:

const bpmInput = document.getElementById('bpm');
const bpmValue = document.getElementById('bpmValue');
let bpm = 120;
bpmInput.addEventListener('input', () => {
  bpm = bpmInput.value;
  bpmValue.textContent = bpm;
});

Play/stop:

let isPlaying = false;
let intervalId;

document.getElementById('play').addEventListener('click', () => {
  if (isPlaying) return;
  isPlaying = true;
  const interval = (60 / bpm) / 4 * 1000; // time per step in ms
  let currentStep = 0;
  intervalId = setInterval(() => {
    // Trigger sounds for currentStep
    for (let i = 0; i < 4; i++) {
      if (pattern[i][currentStep]) {
        playSound(i);
      }
    }
    // Update grid highlighting
    document.querySelectorAll(`td[data-step="${currentStep}"]`).forEach(cell => {
      cell.classList.add('current');
      setTimeout(() => cell.classList.remove('current'), interval - 50);
    });
    currentStep = (currentStep + 1) % steps;
  }, interval);
});

document.getElementById('stop').addEventListener('click', () => {
  clearInterval(intervalId);
  isPlaying = false;
  document.querySelectorAll('.current').forEach(cell => {
    cell.classList.remove('current');
  });
});

Now, the playSound function using Web Audio API.

Need to handle AudioContext creation. Since some browsers require user gesture to start audio, the play button click should initialize the AudioContext.

So, in the play button event listener:

let audioContext;
document.getElementById('play').addEventListener('click', () => {
  if (!audioContext) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
  }
  // ... rest of play code
});

Then, playSound function:

function playSound(instrument) {
  const now = audioContext.currentTime;
  const osc = audioContext.createOscillator();
  const gainNode = audioContext.createGain();
  osc.connect(gainNode);
  gainNode.connect(audioContext.destination);

  switch (instrument) {
    case 0: // Kick
      osc.type = 'sine';
      osc.frequency.setValueAtTime(150, now);
      osc.frequency.exponentialRampToValueAtTime(0.01, now + 0.5);
      gainNode.gain.setValueAtTime(1, now);
      gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.5);
      osc.start(now);
      osc.stop(now + 0.5);
      break;
    case 1: // Snare
      // Snare is more complex; using noise
      // Create a buffer for white noise
      const bufferSize = audioContext.sampleRate * 0.5; // 0.5 seconds
      const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
      const data = buffer.getChannelData(0);
      for (let i = 0; i < bufferSize; i++) {
        data[i] = Math.random() * 2 - 1;
      }
      const noise = audioContext.createBufferSource();
      noise.buffer = buffer;
      noise.connect(gainNode);
      gainNode.gain.setValueAtTime(0.5, now);
      gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
      noise.start(now);
      noise.stop(now + 0.2);
      break;
    case 2: // Hi-hat
      // Similar to snare but shorter and higher freq
      const hatBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.1, audioContext.sampleRate);
      const hatData = hatBuffer.getChannelData(0);
      for (let i = 0; i < hatBuffer.length; i++) {
        hatData[i] = Math.random() * 2 - 1;
      }
      const hatNoise = audioContext.createBufferSource();
      hatNoise.buffer = hatBuffer;
      hatNoise.connect(gainNode);
      gainNode.gain.setValueAtTime(0.3, now);
      gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
      hatNoise.start(now);
      hatNoise.stop(now + 0.1);
      break;
    case 3: // Clap
      // Similar to snare but with multiple bursts
      const clapBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.3, audioContext.sampleRate);
      const clapData = clapBuffer.getChannelData(0);
      for (let i = 0; i < clapBuffer.length; i++) {
        clapData[i] = (Math.random() > 0.5 ? 1 : -1) * Math.random();
      }
      const clapNoise = audioContext.createBufferSource();
      clapNoise.buffer = clapBuffer;
      clapNoise.connect(gainNode);
      gainNode.gain.setValueAtTime(0.4, now);
      gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.3);
      clapNoise.start(now);
      clapNoise.stop(now + 0.3);
      break;
  }
}

Wait, but for the snare, hi-hat, and clap, using buffer sources for noise is correct. However, creating a new buffer each time might be inefficient, but for a simple demo, it's okay.

But the kick uses an oscillator, which is fine.

Potential issues:

- The AudioContext might not be initialized until play is pressed, which is good because of browser autoplay policies.
- The noise buffers are created each time a sound is played, which could cause performance issues, but with only 16 steps, it's manageable.

Now, putting all together into the index.html file.

Need to make sure all JS is inside the script tag, and the HTML structure is correct.

Also, the grid highlighting for the current step: in the interval, add a 'current' class to the cells of the current step, then remove it after a short time.

In the setInterval loop:

// Update grid highlighting
document.querySelectorAll(`td[data-step="${currentStep}"]`).forEach(cell => {
  cell.classList.add('current');
  setTimeout(() => cell.classList.remove('current'), interval - 50);
});

But the interval is in milliseconds, so interval - 50 is the time to keep the highlight.

Now, check if all parts are included.

The CSS for .current could be:

.current { background-color: yellow; }

Add that to the style tag.

Let me adjust the CSS:

<style>
  body { font-family: Arial, sans-serif; text-align: center; }
  #grid { margin: 20px auto; border-collapse: collapse; }
  #grid td { width: 30px; height: 30px; border: 1px solid #000; cursor: pointer; }
  .active { background-color: #0f0; }
  .current { background-color: yellow; }
  .control { margin: 10px; }
</style>

Now, testing the code structure.

Potential issues:

- The AudioContext creation is inside the play event listener, which is correct because it needs a user gesture.
- The noise buffers are created each time a sound is played. For snare, hi-hat, clap, this might be okay for a simple app.
- The kick uses exponentialRamp, which should work.

Now, let's write the entire index.html file.

Make sure to include all code in one file, no external resources.

Check for any missing parts.

In the playSound function, for the snare, hi-hat, and clap, the buffer creation is inside the function, which is correct.

Wait, in the snare case:

case 1: // Snare
  // Create a buffer for white noise
  const bufferSize = audioContext.sampleRate * 0.5; // 0.5 seconds
  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
  ...

This creates a new buffer each time the snare is played, which is acceptable.

Now, the complete code should be:

<!DOCTYPE html>
<html>
<head>
  <title>16-Step Drum Machine</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; }
    #grid { margin: 20px auto; border-collapse: collapse; }
    #grid td { width: 30px; height: 30px; border: 1px solid #000; cursor: pointer; }
    .active { background-color: #0f0; }
    .current { background-color: yellow; }
    .control { margin: 10px; }
  </style>
</head>
<body>
  <h1>16-Step Drum Machine</h1>
  <table id="grid"></table>
  <div class="control">
    <button id="play">Play</button>
    <button id="stop">Stop</button>
    <label>BPM: <input type="range" id="bpm" min="60" max="180" value="120"></label>
    <span id="bpmValue">120</span>
  </div>
  <script>
    const grid = document.getElementById('grid');
    const instruments = ['Kick', 'Snare', 'Hi-hat', 'Clap'];
    const steps = 16;
    const pattern = Array(4).fill().map(() => Array(steps).fill(false));
    let audioContext;
    let isPlaying = false;
    let intervalId;

    // Create grid
    instruments.forEach((name, i) => {
      const row = grid.insertRow();
      const header = row.insertCell();
      header.textContent = name;
      for (let j = 0; j < steps; j++) {
        const cell = row.insertCell();
        cell.dataset.instrument = i;
        cell.dataset.step = j;
        cell.addEventListener('click', () => {
          const active = pattern[i][j];
          pattern[i][j] = !active;
          cell.classList.toggle('active', !active);
        });
      }
    });

    // BPM control
    const bpmInput = document.getElementById('bpm');
    const bpmValue = document.getElementById('bpmValue');
    let bpm = 120;
    bpmInput.addEventListener('input', () => {
      bpm = bpmInput.value;
      bpmValue.textContent = bpm;
    });

    // Play/Stop
    document.getElementById('play').addEventListener('click', () => {
      if (isPlaying) return;
      if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }
      isPlaying = true;
      const interval = (60 / bpm) / 4 * 1000; // ms per step
      let currentStep = 0;

      intervalId = setInterval(() => {
        // Trigger sounds
        for (let i = 0; i < 4; i++) {
          if (pattern[i][currentStep]) {
            playSound(i);
          }
        }
        // Visual feedback
        document.querySelectorAll(`td[data-step="${currentStep}"]`).forEach(cell => {
          cell.classList.add('current');
          setTimeout(() => cell.classList.remove('current'), interval - 50);
        });
        currentStep = (currentStep + 1) % steps;
      }, interval);
    });

    document.getElementById('stop').addEventListener('click', () => {
      clearInterval(intervalId);
      isPlaying = false;
      document.querySelectorAll('.current').forEach(cell => {
        cell.classList.remove('current');
      });
    });

    // Sound generation
    function playSound(instrument) {
      const now = audioContext.currentTime;
      switch (instrument) {
        case 0: // Kick
          const kickOsc = audioContext.createOscillator();
          const kickGain = audioContext.createGain();
          kickOsc.type = 'sine';
          kickOsc.frequency.setValueAtTime(150, now);
          kickOsc.frequency.exponentialRampToValueAtTime(0.01, now + 0.5);
          kickGain.gain.setValueAtTime(1, now);
          kickGain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);
          kickOsc.connect(kickGain);
          kickGain.connect(audioContext.destination);
          kickOsc.start(now);
          kickOsc.stop(now + 0.5);
          break;
        case 1: // Snare
          const snareBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.2, audioContext.sampleRate);
          const snareData = snareBuffer.getChannelData(0);
          for (let i = 0; i < snareBuffer.length; i++) {
            snareData[i] = Math.random() * 2 - 1;
          }
          const snareNoise = audioContext.createBufferSource();
          snareNoise.buffer = snareBuffer;
          const snareGain = audioContext.createGain();
          snareGain.gain.setValueAtTime(0.5, now);
          snareGain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
          snareNoise.connect(snareGain);
          snareGain.connect(audioContext.destination);
          snareNoise.start(now);
          snareNoise.stop(now + 0.2);
          break;
        case 2: // Hi-hat
          const hatBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.1, audioContext.sampleRate);
          const hatData = hatBuffer.getChannelData(0);
          for (let i = 0; i < hatBuffer.length; i++) {
            hatData[i] = Math.random() * 2 - 1;
          }
          const hatNoise = audioContext.createBufferSource();
          hatNoise.buffer = hatBuffer;
          const hatGain = audioContext.createGain();
          hatGain.gain.setValueAtTime(0.3, now);
          hatGain.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
          hatNoise.connect(hatGain);
          hatGain.connect(audioContext.destination);
          hatNoise.start(now);
          hatNoise.stop(now + 0.1);
          break;
        case 3: // Clap
          const clapBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.3, audioContext.sampleRate);
          const clapData = clapBuffer.getChannelData(0);
          for (let i = 0; i < clapBuffer.length; i++) {
            clapData[i] = (Math.random() > 0.5 ? 1 : -1) * Math.random();
          }
          const clapNoise = audioContext.createBufferSource();
          clapNoise.buffer = clapBuffer;
          const clapGain = audioContext.createGain();
          clapGain.gain.setValueAtTime(0.4, now);
          clapGain.gain.exponentialRampToValueAtTime(0.001, now + 0.3);
          clapNoise.connect(clapGain);
          clapGain.connect(audioContext.destination);
          clapNoise.start(now);
          clapNoise.stop(now + 0.3);
          break;
      }
    }
  </script>
</body>
</html>

Check for any errors:

- In the snare case, the buffer length is audioContext.sampleRate * 0.2, but sampleRate is a number, so that's correct.
- The exponentialRamp for gain might need to be linear, but exponential is okay for a quick decay.
- The kick uses exponentialRamp for frequency and gain, which should create a thump.
- The hi-hat is shorter (0.1s) and lower gain.
- Clap has a longer duration (0.3s) and different noise pattern.

This should work as a basic drum machine. All code is inline, no external resources. The file is self-contained.

Okay, let me check what the user asked for. They wanted a 16-step drum machine with a clickable grid for kick, snare, hi-hat, and clap, all sounds synthesized via Web Audio API, plus play/stop and adjustable BPM. The response was a single index.html file with inline CSS and JS, no external resources.

First, I need to verify that the generated index.html meets all requirements. Let me go through each part.

The HTML structure has a table for the grid with 4 rows (instruments) and 16 columns (steps). Each cell is clickable, which toggles the active state. That's correct for the grid.

CSS is inline in a style tag, styled with active and current classes. The current step highlights in yellow, which is good for visual feedback.

JavaScript initializes the grid, handles BPM adjustment, play/stop buttons, and the sequencer. The AudioContext is created on the play button click, which is necessary due to browser autoplay policies.

Sound synthesis functions for each instrument use Web Audio API. Kick uses a sine oscillator with frequency ramp, snare and clap use noise buffers with gain ramps, hi-hat is a shorter noise burst. All sounds are generated without external samples, which meets the synthesis requirement.

The BPM control adjusts the interval between steps correctly: (60 / BPM) / 4 * 1000 ms per step. The sequencer uses setInterval with this interval, scheduling sounds at the right time.

Wait, but using setInterval might not be precise for audio timing. However, since it's a simple demo and the user didn't specify high precision, it's acceptable. The code also uses audioContext.currentTime for scheduling, which is better, but in the play event, it's using setInterval. Hmm, maybe there's a better way with AudioContext's timing, but for a basic implementation, this works.

Check if all sounds are correctly mapped: kick (0), snare (1), hi-hat (2), clap (3). The grid rows correspond to these, so clicking cells should trigger the right sounds.

The file is self-contained, no external resources, all in one HTML file. The CSS and JS are inline as required.

Potential issues: The noise buffers are recreated each time a sound is played, which might be inefficient, but for a simple app, it's okay. Also, the exponentialRamp for gain might cause audio glitches if not handled properly, but the code seems to set it up correctly.

Everything seems to check out. The user should be able to open index.html, click cells to set the pattern, adjust BPM, and play the sequence with synthesized sounds.