We are going to build a single-page drum machine in one HTML file (index.html).
 The app will have:
   - A grid of 4 rows (for kick, snare, hi-hat, clap) and 16 steps (columns).
   - Each cell in the grid is clickable to toggle step activation.
   - A play button to start/stop the sequence.
   - A BPM (beats per minute) control to adjust the tempo.
   - Use the Web Audio API to synthesize the drum sounds.

 We won't use any external libraries (so no jQuery, no Tone.js, etc.) and all code must be inline.

 Steps for the app:
   1. HTML structure: a container for the grid, one row per instrument, 16 cells per row.
   2. CSS for styling: grid layout and active/inactive state for cells.
   3. JavaScript for:
        - Creating the Web Audio context.
        - Synthesizing the four drum sounds (kick, snare, hi-hat, clap) using oscillator and noise.
        - Handling the step grid: toggling steps and highlighting the current step during playback.
        - Playback: a sequencer that loops over the 16 steps at the given BPM.
        - Controls: play/stop and BPM adjustment.

 Note: The Web Audio code will be written in a way that works in modern browsers.

 Let's break down:

 HTML:
   - We'll have a <div> for each instrument row, and within each row, 16 step buttons (or divs).
   - Play button and BPM input (slider or number input).

 CSS:
   - Style the grid so that each row is a horizontal list of steps.
   - Style for active steps and current playing step.

 JavaScript:

   Web Audio:
     We'll create an audio context and then define functions for each sound:

     Kick: a low frequency oscillator with a quick decay.
     Snare: a combination of a noise burst and a tone.
     Hi-hat: a short burst of noise with a high pass filter.
     Clap: a series of short noise bursts.

   We'll pre-create these as audio buffers? Or we can generate them on the fly? 
   Since we are only playing short sounds, we can generate them when needed (on each step) without too much latency.

   Alternatively, we can pre-render the buffers at the start. Let's pre-render the buffers to avoid any timing issues and for better performance.

   Sequencer:
     We'll have an array of 4 arrays (one per instrument) of 16 booleans (the steps).

     When the play button is pressed, we'll start an interval or use Web Audio scheduling to play the steps at the correct time.

     We'll use setInterval or setTimeout at first for simplicity, but note: for precise timing we should use Web Audio scheduling or the Web Clock. However, since we are generating the sounds on the fly and the sounds are short, using setTimeout might be acceptable for this demo.

     Alternatively, we can schedule the sounds using the Web Audio context's current time and schedule them in advance.

   Approach:

     We can use setInterval: every step, we check which notes should play for that step and play them. Then we move to the next step and loop.

     The step duration is: (60 * 1000) / (BPM * 4)  [because we have 4 steps per beat? Actually, in a typical 4/4 pattern, 16 steps are 4 beats, so each step is 1/4 beat. So step duration in milliseconds = (60 * 1000) / (BPM) / 4 = (60000) / (BPM * 4) = 15000 / BPM.

   Steps:

     let stepDuration = (60 * 1000) / (bpm * 4); // for 16th notes

   Then every `stepDuration` milliseconds, we advance the current step and play the notes for that step.

   We also need to handle the case when BPM is changed during playback.

   Alternatively, we can use the Web Audio clock by having a scheduled loop that checks the current step by the audio context's current time. But that is more complex.

   For simplicity and because we are not requiring sample-accurate timing, I'll use setInterval and then clear it on stop.

   However, note: setInterval is not very precise for music. We might get drift. But for this demo it might be acceptable.

   We'll store the current step (0-15) and then wrap around.

   For each step, we'll play the sounds for each instrument that are active on that step.

   We'll also update the UI to highlight the current step.

 Implementation:

   We'll have:
     let audioContext;
     let isPlaying = false;
     let currentStep = 0;
     let bpm = 120; // default
     let timerId = null;

     const steps = [
        [false, ...] for kick (16 steps),
        ... for snare, hihat, clap
     ];

   Pre-render the audio buffers for each sound? We'll do:
     createKickBuffer(), etc. and store them as AudioBuffer objects.

   Then, when we want to play a kick, we can create an AudioBufferSourceNode and play it.

   Steps to create a buffer:

     function createKickBuffer() {
        // create a buffer with a short sine wave that drops in frequency
        // ... implementation
     }

   We'll create these buffers once when the audio context is started.

   Alternatively, we can create the buffers on the fly when the context is created.

   We'll also need to handle the case that the audio context must be resumed after a user gesture (because of autoplay policies). So we'll create the context on the first user interaction (like a play button click).

   Since the first user interaction will be when the user clicks the play button, we can start the context then.

   Plan for audio:

     We'll create a function `initAudio()` that creates the audio context and the buffers. But note: creating buffers is asynchronous? Actually, not if we generate them by filling the buffer manually.

     We can generate the buffers with `audioContext.createBuffer` and then use `buffer.getChannelData(0)` and fill it with samples.

   Kick:

     A simple kick: a sine wave that starts at 150Hz and drops to 50Hz over 0.3 seconds? But actually, we want it to be short.

     We'll design each sound to be less than 0.5 seconds.

   Let's write the sound generation functions:

   Note: The buffer creation is synchronous.

   We'll create:

     let kickBuffer;
     let snareBuffer;
     // ...

     function createKick() {
        const sampleRate = audioContext.sampleRate;
        const duration = 0.5; // seconds
        const buffer = audioContext.createBuffer(1, sampleRate * duration, sampleRate);
        const channelData = buffer.getChannelData(0);

        let currentFrequency = 150;
        const frequencyDrop = (currentFrequency - 50) / (sampleRate * duration);

        for (let i = 0; i < buffer.length; i++) {
            // frequency drops from 150 to 50
            currentFrequency = Math.max(50, currentFrequency - frequencyDrop);
            const t = i / sampleRate;
            channelData[i] = Math.sin(2 * Math.PI * currentFrequency * t) * Math.exp(-t * 5); // decay envelope
        }

        return buffer;
     }

   But note: the envelope is applied as we generate the sample, and the frequency is changing per sample.

   Snare:

     A snare is typically a combination of a sine wave (for the body) and noise (for the snare). We'll generate a short burst of noise and a sine wave at around 180Hz.

   Hi-Hat: a bandpass filtered noise with a very short decay.

   Clap: multiple noise bursts in quick succession.

   Alternatively, we can start with simpler versions:

     Kick: as above.

     Snare: a burst of noise and a short sine wave for the 'pop'. We can generate one by having a second oscillator for the noise? Actually we can generate noise in the buffer by filling with random numbers.

   We'll generate the snare as:

     Part 1: a sine wave at 180Hz for a very short time (0.05s) then decay.
     Part 2: a noise burst (0.2 seconds) that also decays.

   We can generate both in the same buffer by mixing.

   However, since it's a demo, we can do:

     function createSnare() {
        const sampleRate = audioContext.sampleRate;
        const duration = 0.3;
        const buffer = audioContext.createBuffer(1, sampleRate * duration, sampleRate);
        const data = buffer.getChannelData(0);

        // body: sine wave at 180Hz
        for (let i = 0; i < 0.05 * sampleRate; i++) {
            const t = i / sampleRate;
            data[i] = Math.sin(2 * Math.PI * 180 * t);
        }

        // noise part: from 0.01s to the end
        const noiseStart = 0.01 * sampleRate;
        for (let i = noiseStart; i < data.length; i++) {
            data[i] += Math.random() * 2 - 1;
        }

        // apply an envelope to everything: a quick decay
        for (let i = 0; i < data.length; i++) {
            const t = i / sampleRate;
            data[i] *= Math.exp(-t * 10);
        }

        return buffer;
     }

   But note: without normalizing, this might be too loud or too quiet. We might need to adjust the gains.

   Alternatively, we can use a more common technique: generating the envelope for the noise and sine separately.

   Given the scope, we'll aim for functional and adjust as needed.

   We'll create the buffers when the audio context is created (on the first play).

   Steps on play:

     - If audioContext is not created, create it and create the buffers.
     - Also, because of autoplay policies, we must do this on a user gesture (like the play button). So we do:

         if (audioContext === undefined) {
            audioContext = new AudioContext();
            createBuffers(); // function that sets kickBuffer, snareBuffer, etc.
         }
         if (audioContext.state === 'suspended') {
            audioContext.resume();
         }

     Then we start the sequencer.

   We'll have a step() function that is called every `stepDuration` milliseconds:

        step = () => {
            // For each instrument, if the step at `currentStep` is active, play the sound.
            if (kickSteps[currentStep]) {
                playBuffer(kickBuffer);
            }
            ... for snare, hihat, clap

            // Update the UI: remove any previous step highlight, then highlight the current step.
            // Then increment currentStep, and if we reach 16, reset to 0.
            currentStep = (currentStep + 1) % 16;
        }

        timerId = setInterval(step, stepDuration);

   When stopping, clearInterval(timerId) and set currentStep = 0.

   We also need to update the step duration when BPM changes. If during playback, we should restart the sequencer with the new BPM.

   To adjust BPM, we can:

        function setBpm(newBpm) {
            bpm = newBpm;
            stepDuration = 60 * 1000 / (bpm * 4);   // for 16th notes: 4 steps per beat, so 16 steps per 4 beats (one measure)

            if (isPlaying) {
                // restart the sequencer: stop and start again to pick up the new interval.
                stopSequencer();
                startSequencer();
            }
        }

   Where stopSequencer() clears the interval and startSequencer() starts a new interval.

   We'll also need to update the BPM input field.

   UI:

     We'll have:

        <div class="controls">
            <button id="play">Play</button>
            <input id="bpm" type="number" value="120" min="60" max="240">
        </div>

        <div class="sequencer">
            <div class="track kick">
                <div class="step step0 active">1</div>
                ... 16 steps
            </div>
            ... similarly for snare, hihat, clap
        </div>

   We'll generate the grid with JavaScript? Or we can write it in HTML? Since there are only 4 rows and 16 steps, we can write it in HTML.

   But to be concise in code, let's generate the grid with JavaScript on page load. Alternatively, we can just write the HTML statically.

   We'll write the HTML statically:

        <div id="sequencer">
            <div class="track" data-instrument="kick">
                <div class="step"></div> ... 16 times
            </div>
            ... for snare, hihat, clap
        </div>

   Then use CSS to style.

   We'll assign event listeners to each step to toggle an 'active' class and update our steps array.

   We'll store the steps array in memory and then map the step elements to the array.

   Alternatively, we can store the state only in the DOM (by class) and then when playing, check which steps have the 'active' class? That might be simpler.

   Let's do:

        We'll have an Array for each instrument: [false, true, ...]. We'll update that array when the step is clicked.

        Also, we will assign an event listener to each step to toggle the state.

        But we can also have a separate data structure. For simplicity, we'll store in an array.

   Implementation:

        let steps = {
            kick: Array(16).fill(false),
            snare: Array(16).fill(false),
            hihat: Array(16).fill(false),
            clap: Array(16).fill(false)
        };

        We'll assign data attributes to each step: data-instrument and data-index (0-15).

        Then on click, we can:

            const stepEl = e.target;
            const instrument = stepEl.parentElement.dataset.instrument;
            const index = Array.from(stepEl.parentElement.children).indexOf(stepEl); // but we can assign data-index on each step?

        We'll generate the grid with:

            for (let i=0; i<4; i++) {
                const track = document.createElement('div');
                track.className = 'track';
                track.dataset.instrument = instruments[i];  // ['kick','snare','hihat','clap']

                for (let j=0; j<16; j++) {
                    const step = document.createElement('div');
                    step.className = 'step';
                    step.dataset.index = j;
                    track.appendChild(step);
                }

                sequencer.appendChild(track);
            }

        Then add event listeners to each step:

            step.addEventListener('click', function() {
                const instrument = this.parentElement.dataset.instrument;
                const index = parseInt(this.dataset.index);
                steps[instrument][index] = !steps[instrument][index];
                this.classList.toggle('active');
            });

   We'll also store the step elements so we can highlight the current step.

   For current step highlighting, we can do:

        function highlightStep(stepIndex) {
            // remove any 'current' class from all steps
            document.querySelectorAll('.step').forEach(step => step.classList.remove('current'));
            // then for each track, the step at stepIndex gets class 'current'
            document.querySelectorAll('.track').forEach(track => {
                track.children[stepIndex].classList.add('current');
            });
        }

   Then in the step function:

        highlightStep(currentStep);
        ... then play sounds for the step.

        Then after playing, we advance and next time we'll highlight the next step.

   But note: we remove the current class from all steps and then set the new current step.

   We'll do this before playing the sounds? So the highlight happens exactly when the sound is played.

   Now, let's put it all together.

   We'll write the code inline in the <script> tag.

   We'll use ES5 to be more compatible? But we are targeting modern browsers, so ES6 is fine.

   We'll wrap the JavaScript in a DOMContentLoaded event to set up the event listeners.

   We'll also use a class for the app to avoid global pollution? But since it's a single file and small, we can use global functions.

   Alternatively, we use an IIFE.

   We don't want to block the DOM, so we'll wait for the DOM to be ready.

   We'll write:

        document.addEventListener('DOMContentLoaded', function() {
            // initialize the app
        });

   Let's start writing the HTML, then CSS, then JS.

   We'll put the CSS in a <style> tag and JS in a <script> tag.

   Note: We are writing a self-contained file.

   We'll also need to include the sound generation functions.

   Due to the complexity of the sound generation, we'll write the buffer generation functions inside the script.

   We'll predefine the buffer variables as null, and then create them on first play.

   We also need to handle the case when the audio context is suspended. We'll resume it when the user clicks play.

   We'll create:

        let audioContext = null;
        let kickBuffer = null;
        // ... etc.

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