Environmental sound recording & keyboard sampler performance pad | ZeroTools

Built with the standard Web Audio API provided by browsers, this sampler features a grid of 26 independent sampling slots corresponding to alphabet keys A through Z.

An AudioContext is not yet created upon merely loading the page; it is initialized on the first user interaction, and if paused, resumes operation.

When a user clicks the "Enable Audio" button or clicks or taps any pad directly, resume() is called on the AudioContext to activate the audio processing infrastructure.

The moment this initial audio initialization completes, programmatic synthesis using mathematical models constructs preset waveforms automatically assigned to eight specific slots: slot A receives a bass drum with an exponential decay envelope, slot S receives a snare drum synthesized with a noise generator, slot D receives a hi-hat emphasizing high-frequency components, and slots F, G, H, J, and K receive sine-wave synthesizer tones pitched from 261.63 Hz (C4) to 392.00 Hz (G4).

Rather than downloading audio files from external servers, all preset sounds are computed directly within browser memory using the device CPU and expanded into an AudioBuffer as Float32Array data.

This allows immediate testing of audio playback via keyboard typing or pad clicking without download latency. Because the tool does not provide file import or full configuration save and restore functions, settings are discarded whenever the browser tab is closed or reloaded.

Lacking features to upload external audio files into slots, this tool relies entirely on direct recording via the browser's MediaRecorder API for external sampling.

To record, select a target slot from A through Z and grant microphone access. Recording duration can be set between 1 and 5 integer seconds using the slider interface, with a default initial value of 3 seconds.

Until the configured maximum recording duration is reached or the user stops recording, the MediaRecorder accumulates chunks from the incoming microphone stream into a Blob.

Once recording finishes and the stream stops, the accumulated Blob data is converted to an ArrayBuffer and decoded into a temporary AudioBuffer in memory using AudioContext.decodeAudioData().

This conversion depends on the actual encoding format of the recorded audio (such as audio/webm or audio/mp4); if decoding fails, an error message appears indicating that recorded data could not be converted for playback.

The tool prevents concurrent recording triggers, and if startup fails or recording stops, acquired microphone tracks are stopped.

Because the next recording waits until decoding completes, brief conversion latency can occur even for short recordings. This mechanism does not guarantee automatic recovery from all device errors.

Recording operates within the browser, functioning by passing captured audio data from the microphone directly into browser memory.

Playback for each slot is triggered by mouse clicks or touch taps on the displayed pads, or by pressing corresponding A through Z keys on a PC keyboard.

Unless focus is inside a text input field, pressing a specific key immediately creates an AudioBufferSourceNode for the corresponding slot and begins playback.

Rather than terminating previously triggered sounds on consecutive keypresses (monophonic), this tool creates an independent playback node on every trigger, layering sounds polyphonically.

Consequently, synthesizer notes with long decays or environmental audio samples overlap naturally without abrupt cutoffs. If you need to stop overlapping audio immediately, select the target slot via right-click or tap and click "Stop" in the parameter panel to invoke stop() on all active playback nodes linked to that slot.

When executing "Delete Sample" to clear unwanted audio, playback for that slot is forcibly stopped and the reference to its AudioBuffer is reset to null, returning the slot to its initial empty state.

Because playback control targets in-memory buffers directly, no audio files are retrieved during triggers, though high device load or browser and output device latency can introduce playback delays.

Through the parameter editing panel, volume, pitch/playback rate, and loop settings can be configured independently for the sample stored in a selected slot.

Each setting applies to newly created playback nodes; changes do not apply retroactively to currently sounding voices, requiring you to stop and re-trigger playback.

Volume control utilizes a GainNode's gain value, adjustable via slider from 0 (silent) to 1 (original level) in steps of 0.05, displayed on screen as a percentage (0% to 100%) to balance recorded environmental sounds with presets.

Playback rate modification operates via the playbackRate property of the AudioBufferSourceNode, adjustable from 0.5x to 2.0x in increments of 0.05.

As an important constraint, this tool does not implement advanced time-stretching; playback speed and pitch always change together.

Setting the slider to 2.0x halves playback duration while shifting pitch up by one octave, whereas 0.5x doubles duration while shifting pitch down by one octave, mimicking classic tape-speed behavior.

Enabling the loop toggle sets the loop property to true, automatically repeating playback from the beginning upon reaching the end of the AudioBuffer.

The tool does not provide waveform slicing, cut editing, fade-in/fade-out curves, or overall recording features to sequence and export multiple slot performances into a single file.

To assist visual audio inspection, this tool includes two waveform display features. The first is a real-time waveform visualizer active during recording, which routes the microphone input stream to an AnalyserNode (fftSize 2048) and draws time-domain amplitude data obtained via getByteTimeDomainData() onto an HTML Canvas as an animated green line graph.

This provides immediate visual feedback on incoming sound levels and microphone reception during recording. The second is a static waveform preview shown after recording completes or when selecting a slot assigned a preset sound.

It retrieves left-channel PCM data directly from the in-memory AudioBuffer using getChannelData(0), downsamples it to the Canvas pixel width, calculates peak-to-peak ranges, and plots the overall sample envelope shape.

This static preview serves as a visual reference for loaded audio rather than a verification of flawless recording. When recorded data is no longer needed or you wish to record fresh audio, deleting the slot removes the reference to the assigned AudioBuffer rather than performing an immediate memory wipe.

Because partial waveform deletion or trimming is not supported, deleting a sample clears the slot's audio buffer reference without resetting volume, speed, and loop parameters to their defaults.

When operating this tool via Web APIs, users should understand specification differences across operating systems and browsers, as well as security limitations.

First, microphone access (MediaDevices.getUserMedia) must be explicitly granted according to browser security policies. If permission is denied or the page is accessed in an insecure context outside trusted origins such as HTTPS or localhost, the API is unavailable and recording cannot start.

Furthermore, because MIME types supported by MediaRecorder (such as audio/webm;codecs=opus or audio/mp4) vary across browser rendering engines, the tool dynamically checks compatibility via isTypeSupported() to generate recording chunks.

Consequently, subsequent decoding (decodeAudioData) may fail with an exception in certain browsers if the recorded codec cannot be interpreted.

In-memory audio buffers and slot parameters are held within application React state and references rather than stored in persistent locations like IndexedDB or Local Storage.

Closing the browser tab or reloading the page resets the sampler to its initial state without guaranteeing secure memory sanitization.