🔊 Sound & Music

Add sound effects and music to your games! All sounds are created instantly in the browser — no files to load. Play preset effects, musical notes, or drum beats.

playSound(name)

Plays a built-in sound effect. Choose from 8 presets: "beep", "coin", "jump", "hit", "explosion", "powerup", "laser", "pop".

Parameter	Type	Description
`name`	`string`	"beep", "coin", "jump", "hit", "explosion", "powerup", "laser", or "pop"

Tip: The most useful ones for games: "coin" for collecting items, "jump" for jumping, "hit" for taking damage, and "explosion" for big impacts.

function setup() {
  size(400, 200);
}

function draw() {
  background("midnightblue");
  fill("white");
  textSize(16);
  text("Press keys 1-8 for sounds!", 80, 90);
}

function keyPressed() {
  if (key === "1") playSound("beep");
  if (key === "2") playSound("coin");
  if (key === "3") playSound("jump");
  if (key === "4") playSound("hit");
  if (key === "5") playSound("explosion");
  if (key === "6") playSound("powerup");
  if (key === "7") playSound("laser");
  if (key === "8") playSound("pop");
}

playNote(note, duration, volume?)

Plays a musical note by name. Use note names like "C4", "D4", "E4" (the number is the octave). You can also use sharps and flats like "F#4" or "Bb3".

Parameter	Type	Description
`note`	`string`	Note name like "C4", "F#5", "Bb3"
`duration`	`number`	How long the note plays in milliseconds
`volume`optional	`number`	Volume from 0 to 1 (default: 0.3)

Tip: Middle C is "C4". Higher octaves (C5, C6) sound higher. Lower octaves (C3, C2) sound deeper. Try making melodies!

let notes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5"];
let current = 0;

function setup() {
  size(400, 200);
}

function draw() {
  background("midnightblue");
  fill("white");
  textSize(16);
  text("Press SPACE to play notes!", 80, 50);
  textSize(24);
  if (current > 0) {
    text("Note: " + notes[current - 1], 140, 100);
  }
}

function keyPressed() {
  if (key === " ") {
    playNote(notes[current % notes.length], 300);
    current++;
  }
}

playDrum(name)

Plays a drum sound. Choose from 3 presets: "kick" (bass drum), "snare" (snare drum), "hihat" (hi-hat cymbal).

Parameter	Type	Description
`name`	`string`	"kick", "snare", or "hihat"

Tip: Combine kick, snare, and hihat to make drum beats. Try playing them on different frameCount intervals!

let beat = 0;

function setup() {
  size(400, 200);
}

function draw() {
  background("midnightblue");

  if (frameCount % 15 === 0) {
    beat = (beat + 1) % 8;
    if (beat === 0 || beat === 4) playDrum("kick");
    if (beat === 2 || beat === 6) playDrum("snare");
    if (beat % 2 === 0) playDrum("hihat");
  }

  fill("white");
  textSize(16);
  text("Auto drum beat!", 140, 50);

  noStroke();
  for (let i = 0; i < 8; i++) {
    fill(i === beat ? "gold" : "gray");
    rect(30 + i * 45, 100, 35, 35);
  }
}