Back to Tools

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
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 };<br>
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:

👉 Click to show full list
#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

Whether you're tweaking an old buzzer tune or remixing something new, 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 ▲ and ▼.
  • Change the number of steps using ➕ and ➖ buttons.

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