Keyboard inputs:

• Spacebar - play tone
• e/q - Change waveform
• Right/d - increase pitch
• Left/a - decrease pitch
• Up/w - Increase tempo
• Down/s - Decrease tempo
• Shift - Reset pitch to A4

Create tunes! Configure a simple beat and melody pattern. You can use a combination of hihats, claps, kicks, or snare.

Check out this Music Player too.

Copy
const beatPattern = [
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 },
    { beat: "hihat", dur: 2 }
];

const melody = [
    { note: "A5", dur: 1 },
    { note: "rest", dur: 1 },
    { note: "G#5", dur: 1 },
    { note: "E5", dur: 1 },
    { note: "rest", dur: 1 },
    { note: "A5", dur: 1 },
    { note: "rest", dur: 1 },
    { note: "G#5", dur: 1 },
    { note: "rest", dur: 3 },
    { note: "E5", dur: 2 },
    { note: "E5", dur: 2 },
    { note: "D5", dur: 0.5 },
    { note: "rest", dur: 0.5 },
    { note: "D5", dur: 6 }
];

playBeatPattern(beatPattern);
playMelodyPattern(melody);
                    

Copy and paste everything in the console or Play now!

Experiment with chords or stacked beats. The shortest value determines when the sequence advances, and any longer notes or hits will continue sounding until their full duration completes.

Copy
const melody = [
    { notes: [
        // This shortest note defines the step length;
        // the sequence advances after 1 beat
        { note: "B4", dur: 1 },
        // Sustains across the next 2 steps until
        // its full duration completes
        { note: "B5", dur: 3 },
        // Also sustains into the following step
        { note: "B2", dur: 2 }
    ]},
    // Instrument options:
    // sine,square,triangle,sawtooth,piano,
    // strings,electricGuitar or acousticGuitar
    { note: "B3", dur: 1, instrument: "electricGuitar" },
    // At normal volume
    { note: "B3", dur: 1, vol: 1 },
    // Volume at quieter volume
    { note: "B3", dur: 1, vol: 0.2 }
    // Volume get louder within duration - 0.1 to 1 range
    { note: "B3", dur: 1, vol: [0.2, 1] }
];

const beatPattern = [
    { beats: [
        // Sustains across the next step until
        // its full duration completes
        { beat: "kick", dur: 2 },
        { beat: "snare", dur: 2 },
        // This shortest beat defines the step length
        { beat: "hihat", dur: 1 },
    ]},
    // At normal volume
    { beat: "hihat", dur: 1, vol: 1 },
    // Volume get louder within duration
    // Not applicable for clap - 0.1 to 1 range
    { beat: "hihat", dur: 1, vol: [0.2, 0.6, 1] }
];

// Define BPM (optional) - default is 300 BPM for both
playBeatPattern(beatPattern, 200);
playMelodyPattern(melody, 100);
                    

Play music that combines different chords and beat patterns.