The user wants a self-contained single-page web app with a 16-step drum machine, clickable grid for four instruments (kick, snare, hi-hat, clap). Sounds should be synthesized using Web Audio API (no external audio files). It should have play/stop and adjustable BPM.

We need to produce index.html containing all HTML, CSS, JS.

We'll need to implement a 16-step sequencer: a grid of 16 columns per instrument row. Clicking toggles step on/off. Use a visual representation: maybe button or div with active class.

Need playback: schedule events using Web Audio API: create oscillator and noise for drum sounds.

Implement synth functions: kick (sine with quick pitch decay, maybe low-pass filter), snare (noise burst filtered), hi-hat (high-pass filtered noise with high frequency), clap (multiple noise bursts). We'll implement simple synths.

Need a global tempo: BPM adjustable via input range or number input.

Implement a loop: scheduler that steps each 16th note based on BPM (60/BPM seconds per quarter note; 16th note is quarter/4 = 60/(BPM*4) seconds). Use setInterval or use Web Audio's scheduling.

We'll have play button toggles start/stop. When playing, we highlight current step.

Implementation plan:

HTML:

- Title, container.
- Controls: BPM label and input (range 60-200). Play/Stop button.
- Grid: table or div grid: for each instrument row (kick, snare, hi-hat, clap) we create a div.row; each step is a div.cell with data-instrument and data-step, class 'active' when on.
- IDs for elements.

CSS: style container, grid, cell size, active color.

JS: define sequencer object.

- const steps = 16;
- const instruments = ['kick','snare','hihat','clap'];
- const pattern = {kick:Array(16).fill(false), snare:..., hihat:..., clap:...};

- click handler toggles pattern[instrument][step] and toggles class.

- bpm variable default 120.

- function schedule() uses audioContext.currentTime and schedule events ahead to avoid drift: can use simple setInterval for now given educational purposes, but implement using Web Audio's scheduler: maintain nextNoteTime; schedule next sixteenth notes.

Simplify: use setInterval with interval = (60 / bpm) / 4 * 1000 ms.

- On each tick: for each instrument, if pattern[instrument][currentStep] is true, trigger sound.

- Implement kick: create oscillator, freq starting at 150, exponential ramp down to 50 over 0.5 sec with gain envelope.

- snare: white noise source filtered, gain envelope.

- hihat: filtered noise highpass, quick envelope.

- clap: multiple short noise bursts.

Implement helper createNoiseBuffer.

We must ensure audioContext is resumed on user interaction (click play).

Make sure script runs.

Write full index.html via write tool.

Let's produce code.