Getting Started — iHearYouCanCode

1. Add these lines to your page

Everything on this site runs in your web browser — nothing to install. Copy these lines into your HTML file. Load them in this order: p5.js first, then p5.sound, then ProControls.

<!-- Google icon font (optional — used by ProControls) -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=block" rel="stylesheet">

<!-- p5.js -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/p5.min.js"></script>

<!-- p5.sound (requires p5.js above) -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.13/lib/addons/p5.sound.min.js"></script>

<!-- ProControls — needed for section 3 -->
<script src="https://cdn.jsdelivr.net/gh/dstein-art/proControls4p5js@v0.8.3/ProControls.js"></script>

<!-- Your sketch -->
<script src="sketch.js"></script>

Want a shortcut? We made a p5.js Editor template with everything already set up. Log in, open the template, and click Duplicate to save your own copy. Open template.

2. Make your first beep

This sketch plays one steady beep so you know sound is working. In setup(), create a p5.Oscillator — that's a tone generator. Use amp() to set how loud it is and freq() to set how high or low it sounds. Then call osc.start() to play it.

Open in p5.js Editor

var osc;

function setup() {
  createCanvas(600, 320);
  osc = new p5.Oscillator('sine');
  osc.amp(0.5);
  osc.freq(440);
  osc.start();
}

function draw() {
  background(30);
}

Why do I need to click first?

Browsers won't play sound until you click something — it's a safety rule. This example works in the p5.js Editor because you already clicked Play to run it. In section 3, userStartAudio() turns sound on the first time you use the pad.

3. Add a control pad

ProControls gives you an XYPad — a square you drag inside. Left and right changes pitch (how high or low the note is). Up and down changes volume (how loud it is). Call proControlBackground() in draw() to draw the panel behind your controls. When the pad moves (onChange), call userStartAudio() and update the oscillator.

Try editing the code — the preview updates as you type

ControlStyle = 'white'; 
var osc;

function setup() {
  createCanvas(300, 300);
  osc = new p5.Oscillator('square');
  osc.amp(0);
  osc.freq(440);

  new XYPad({
    x: 20, y: 20,
    width: 200, height: 200,
    minX: 50, maxX: 170,
    minY: 0, maxY: 1,
    springBack: true,
    springDuration: 20.0,
    valueX: 110, valueY: 0,
    label: 'FREQ / VOL',
    onChange: ({ x, y }) => {
      userStartAudio();
      if (!osc.started) osc.start();
      osc.freq(x);
      osc.amp(y, 0.05);
    },
  });
}

function draw() {
  proControlBackground();
}