Oscillator A

440 Hz

Oscillator B

220 Hz

Drum Beeps

Keyboard Synth

Step Sequencer

120 BPM

Mic Sample / File

Ready
BPM: ---

Mixer

Master Effect

Record Output

Ready

How To Play

  1. Enable Audio via the button that appears.
  2. Use Oscillators A/B (Play/Stop Src buttons, adjust sliders).
  3. Use Drum Beeps (Click pads, adjust Beep Vol).
  4. Keyboard Synth:
    • Select an Instrument and Tuning.
    • Click or tap the piano keys to play notes directly.
    • This keyboard is played manually and is **not** controlled by the sequencer.
    • Adjust "Synth Vol".
  5. Step Sequencer:
    • Click squares to activate steps for OscA, OscB, Kick, Snare, HiHat, Clap, and the Mic/File Sample.
    • Use Play/Stop Seq buttons and adjust Tempo.
  6. Mic Sample / File:
    • Mic: Click "Rec Mic", allow permission, record (max 5s), click "Stop Mic".
    • File: Click "Load WAV", select a `.wav` file (BPM detection attempted).
    • Click "Play Sample" to hear it. Adjust "Sample Vol".
    • The "Mic" track in the Sequencer plays this sample.
  7. Use Master Volume and Delay Effect.
  8. Record Output: Use "Start Rec" / "Stop Rec" to save your mix.
SolvProb — Custom Website & App Engineering

HTML DJ Booth

Make browser-based beats with oscillators, drum pads, a keyboard synth, a step sequencer, samples, effects, and recording.

What this tool does

This browser DJ booth is a hands-on Web Audio playground. It combines two adjustable oscillators, drum-beep pads, a playable keyboard synth, a 16-step sequencer, microphone or WAV sampling, a master delay, volume controls, and an output recorder.

Who this is for

How to use this tool

  1. Enable audio when prompted by the browser.
  2. Start Oscillator A or B, choose a waveform, and adjust frequency and volume.
  3. Tap drum pads or the keyboard, then activate steps in the sequencer and set its tempo.
  4. Record a short microphone sample or load a WAV file, then use it in the sample track.
  5. Adjust the master volume or delay and use Start Rec/Stop Rec to capture the output when available.

Inputs

Inputs include oscillator waveforms, frequencies, volumes, drum-pad clicks, keyboard notes, instrument and tuning choices, sequencer steps and tempo, master volume, delay mix, and a microphone recording of up to five seconds or a local WAV file.

Outputs

The page produces live audio through the browser and shows recording or sample status. The output recorder creates a downloadable recording link after a successful capture; microphone access requires browser permission, and audio behavior depends on the device and browser.

Example use cases

Related SolvProb tools

Frequently asked questions

How do I start making sound?

Click Enable Audio first, then use Play Src on either oscillator, press a drum button, play the keyboard, or start the sequencer.

Do I need microphone access?

Only if you choose Rec Mic. You can use the synths, drums, keyboard, and sequencer without recording from a microphone; loading a WAV file is another sample option.

Can the sequencer play the keyboard manually?

No. The keyboard is played manually. The step sequencer controls its own oscillator, drum, and sample tracks.

Can I export a finished track?

You can record the browser output and use the generated download link when recording succeeds. This is a sketching tool, not a full multitrack production suite.

Need a custom audio or media tool?

SolvProb builds browser-based creative tools, media workflows, and interactive audio experiences tailored to your needs.

Talk to SolvProb →