Web Audio Grid Sequencer

Create, preview, and export melodies for Arduino and ESP32 projects. Generate melody[] and noteDurations[] arrays ready for ledcWriteTone() and passive buzzer playback.

16 Steps

Pitch: Current: 0

Tempo: BPM

Melody Input/Output

Exporting and Using in ESP32 Projects

Once you’ve built a melody in the grid and tested it using the live audio preview, you can easily export it for use in your ESP32 sketch.

Just click the Export button, and you’ll get something like this:

int melody[] = { NOTE_C4, NOTE_E4, 0, NOTE_G4 };
int noteDurations[] = { 250, 250, 250, 250 };

How to Use It

Copy and paste the generated arrays directly into your Arduino sketch. Then, loop through them using ledcWriteTone() like we did in the passive buzzer tutorial:

#include <Arduino.h>
#include "notes.h"

#define SPEAKER_PIN 19
#define CHANNEL     0
#define RESOLUTION  8

// Replace with melody[] and noteDurations[] from the sequencer
int melody[] = { NOTE_C4, NOTE_E4, 0, NOTE_G4 };
int noteDurations[] = { 250, 250, 250, 250 };

void setup() {
    Serial.begin(9600);
    ledcSetup(CHANNEL, 2000, RESOLUTION);      // Initial dummy freq
    ledcAttachPin(SPEAKER_PIN, CHANNEL);
}

void loop() {
    for (int i = 0; i &lt; sizeof(melody) / sizeof(melody[0]); i++) {
        int freq = melody[i];
        int duration = noteDurations[i];

        if (freq > 0) {
            ledcWriteTone(CHANNEL, freq);      // Play note
        } else {
            ledcWriteTone(CHANNEL, 0);         // Rest
        }

        delay(duration);                     // Wait note duration
        ledcWriteTone(CHANNEL, 0);           // Stop sound (pause between notes)
    }

    delay(1000); // wait before replaying the melody
}

It’s the fastest way to go from “melody in your head” to “melody on your ESP32 buzzer.”

Note Frequency Definitions

To use the exported melody[] array with NOTE_C4, NOTE_G4, etc., include the following note definitions in header `notes.h` file in the same folder as your main sketch:


                        #define NOTE_B0  31

                        #define NOTE_C1  33

                        #define NOTE_CS1 35

                        #define NOTE_D1  37

                        #define NOTE_DS1 39

                        #define NOTE_E1  41

                        #define NOTE_F1  44

                        #define NOTE_FS1 46

                        #define NOTE_G1  49

                        #define NOTE_GS1 52

                        #define NOTE_A1  55

                        #define NOTE_AS1 58

                        #define NOTE_B1  62

                        #define NOTE_C2  65

                        #define NOTE_CS2 69

                        #define NOTE_D2  73

                        #define NOTE_DS2 78

                        #define NOTE_E2  82

                        #define NOTE_F2  87

                        #define NOTE_FS2 93

                        #define NOTE_G2  98

                        #define NOTE_GS2 104

                        #define NOTE_A2  110

                        #define NOTE_AS2 117

                        #define NOTE_B2  123

                        #define NOTE_C3  131

                        #define NOTE_CS3 139

                        #define NOTE_D3  147

                        #define NOTE_DS3 156

                        #define NOTE_E3  165

                        #define NOTE_F3  175

                        #define NOTE_FS3 185

                        #define NOTE_G3  196

                        #define NOTE_GS3 208

                        #define NOTE_A3  220

                        #define NOTE_AS3 233

                        #define NOTE_B3  247

                        #define NOTE_C4  262

                        #define NOTE_CS4 277

                        #define NOTE_D4  294

                        #define NOTE_DS4 311

                        #define NOTE_E4  330

                        #define NOTE_F4  349

                        #define NOTE_FS4 370

                        #define NOTE_G4  392

                        #define NOTE_GS4 415

                        #define NOTE_A4  440

                        #define NOTE_AS4 466

                        #define NOTE_B4  494

                        #define NOTE_C5  523

                        #define NOTE_CS5 554

                        #define NOTE_D5  587

                        #define NOTE_DS5 622

                        #define NOTE_E5  659

                        #define NOTE_F5  698

                        #define NOTE_FS5 740

                        #define NOTE_G5  784

                        #define NOTE_GS5 831

                        #define NOTE_A5  880

                        #define NOTE_AS5 932

                        #define NOTE_B5  988

                        #define NOTE_C6  1047

                        #define NOTE_CS6 1109

                        #define NOTE_D6  1175

                        #define NOTE_DS6 1245

                        #define NOTE_E6  1319

                        #define NOTE_F6  1397

                        #define NOTE_FS6 1480

                        #define NOTE_G6  1568

                        #define NOTE_GS6 1661

                        #define NOTE_A6  1760

                        #define NOTE_AS6 1865

                        #define NOTE_B6  1976

                        #define NOTE_C7  2093

                        #define NOTE_CS7 2217

                        #define NOTE_D7  2349

                        #define NOTE_DS7 2489

                        #define NOTE_E7  2637

                        #define NOTE_F7  2794

                        #define NOTE_FS7 2960

                        #define NOTE_G7  3136

                        #define NOTE_GS7 3322

                        #define NOTE_A7  3520

                        #define NOTE_AS7 3729

                        #define NOTE_B7  3951

                        #define NOTE_C8  4186

                        #define NOTE_CS8 4435

                        #define NOTE_D8  4699

                        #define NOTE_DS8 4978

Importing Existing Melodies

Already have a melody and duration array from another project? You can load it directly into the sequencer to visualize and edit it-no need to rebuild it from scratch.

Just paste your existing code into the Melody Input/Output text area like this:


                        int melody[] = { NOTE_C4, NOTE_E4, NOTE_G4, 0, NOTE_C5 };

                        int noteDurations[] = { 250, 250, 250, 250, 250 };

Then click Load, and the grid will reconstruct your sequence based on the notes and durations. Any 0 entries (rests) will be skipped.

This feature is perfect for:

Tuning melodies by ear using the live Web Audio playback
Updating tempo, transposing pitch, or adjusting step count visually
Iterating on existing sketches without re-flashing the board every time

This makes the whole workflow way smoother.

How it Works

Grid Layout

The main part of the tool is a step sequencer grid:

Rows = Notes
Each row represents a pitch, starting from B4 down to C4 by default. You can transpose the pitch range up or down to explore more octaves.
Columns = Steps
Each column is a moment in time. A single step plays for a fixed duration (based on the current tempo), and you can enable or disable any note at any step.

Web Audio Playback

When you press Play, the sequencer starts stepping through each column in time. If a cell is active (green), it plays the corresponding note using the Web Audio API, producing a square wave that mimics the sound of a passive buzzer.

You’ll also see visual feedback as each column is highlighted during playback.

Real-Time Interaction

Click any cell to toggle it on or off.
Adjust tempo in BPM.
Transpose the pitch range with the pitch up/down buttons.
Change the number of steps with the + and − buttons.

This all runs entirely in the browser - no server, no dependencies - making it fast and portable.