查一個名稱

let shown = 'move a knob, the mod wheel or a pedal';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(24);
}

function controlChange(cc, value, channel) {
  shown = 'CC ' + cc + ' = ' + nf(value, 1, 2) + '  (channel ' + channel + ')';
}

function draw() {
  background(20);
  fill(255);
  text(shown, width / 2, height / 2);
}

let sustain = false;

function setup() {
  createCanvas(400, 300);
}

function controlChange(cc, value) {
  if (cc === 64) sustain = value >= 0.5;   // the sustain pedal: 64 and up counts as down
}

function mousePressed() {
  OAVp5.input([0xB0, 64, 127]);   // no pedal? press the mouse
}

function mouseReleased() {
  OAVp5.input([0xB0, 64, 0]);
}

function draw() {
  background(sustain ? 90 : 20);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255);
  for (let i = 1; i <= 4; i++) circle(i * 80, height - 40 - fader(i) * 200, 30);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255);
  rect(40, height - 40, fader1 * (width - 80), 24);   // fader 1 is a level bar
}

let level = 0;

function setup() {
  createCanvas(400, 300);
}

function faderMoved(n, value) {
  if (n === 1) level = value;   // fader 1 only
}

function draw() {
  background(20);
  fill(255);
  rect(40, height - 40, level * (width - 80), 24);
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  fill(255);
  for (let i = 1; i <= 8; i++) {
    rect(i * 44 - 20, height - 20, 30, -10 - knob(i) * 250);   // one bar per knob
  }
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(knob1 * 255);   // knob 1 sets the brightness
}

function setup() {
  createCanvas(400, 300);
  colorMode(HSB, 1);
}

function draw() {
  background(0.65, 0.5, 0.15);
  fill(knob2, 0.8, 1);                        // knob 2: colour
  circle(width / 2, height / 2, 40 + knob1 * 300);   // knob 1: size
}

let last = 'turn a knob';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(32);
}

function knobMoved(n, value) {
  last = 'knob ' + n + ': ' + nf(value, 1, 2);
}

function draw() {
  background(20);
  fill(255);
  text(last, width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  const f = frameCount - lastNoteFrameCount;    // frames since a key went down
  fill(120, 190, 255);
  circle(200, 150, max(0, 200 - f * 5));        // shrinks by 5 px a frame
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  const ago = millis() - lastNoteTs;    // ms since a key went down
  fill(255, 200 * exp(-ago / 400) + 30);
  circle(200, 150, 60 + 160 * exp(-ago / 400));
}

let shown = 'play something';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(20);
}

function midiMessage(bytes, source) {
  shown = bytes.map((b) => '0x' + b.toString(16).toUpperCase()).join(' ') + '  from ' + source;
}

function draw() {
  background(20);
  fill(255);
  text(shown, width / 2, height / 2);
}

let pressure = 0;

function setup() {
  createCanvas(400, 300);
}

function midiMessage(bytes) {
  if ((bytes[0] & 0xF0) === 0xD0) pressure = bytes[1] / 127;   // channel pressure (aftertouch)
}

function mouseMoved() {
  OAVp5.input([0xD0, constrain(round(mouseX / width * 127), 0, 127)], 'mouse');   // no aftertouch? move the mouse
}

function draw() {
  background(20);
  circle(width / 2, height / 2, 40 + pressure * 260);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(64);
}

function draw() {
  background(20);
  fill(255);
  text(noteName(note), width / 2, height / 2);   // the last key, as a name
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(noteIsDown('C4') ? color(255, 211, 107) : 80);
  circle(width / 2, height / 2, 140);   // lights up while middle C is held
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(noteIsPressed ? 90 : 20);   // lighter while any key is down
}

const down = {};
let held = 'play a key and let it go';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(24);
}

function noteOn(note) { down[note] = millis(); }

function noteOff(note) {
  if (down[note] !== undefined) {
    held = noteName(note) + ' was held ' + round(millis() - down[note]) + ' ms';
    delete down[note];
  }
}

function draw() {
  background(20);
  fill(255);
  text(held, width / 2, height / 2);
}

let shown = 'play a key';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(24);
}

function noteOn(note, velocity, channel) {
  shown = noteName(note) + '  velocity ' + nf(velocity, 1, 2) + '  channel ' + channel;
}

function draw() {
  background(20);
  fill(255);
  text(shown, width / 2, height / 2);
}

let hits = [];

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function noteOn(note, velocity, channel) {
  hits.push({ note, velocity, pad: channel === 10, born: millis() });   // channel 10: the pads
}

function draw() {
  background(20);
  hits = hits.filter((h) => millis() - h.born < 1500);
  for (const h of hits) {
    const fade = 1 - (millis() - h.born) / 1500;
    const x = map(h.note, 24, 96, 20, width - 20);
    fill(h.pad ? color(255, 90, 31, fade * 255) : color(120, 190, 255, fade * 255));
    if (h.pad) square(x - 25, 125, 50 + h.velocity * 40);
    else circle(x, 150, 20 + h.velocity * 80);
  }
}

function setup() {
  createCanvas(400, 300);
  background(20);
  noStroke();
}

function notePressed(note, velocity) {
  fill(random(255), random(255), random(255), 200);
  circle(map(note, 36, 96, 20, width - 20), height / 2, 10 + velocity * 120);
}

let held = {};

function setup() {
  createCanvas(400, 300);
}

function notePressed(note) { held[note] = millis(); }
function noteReleased(note) { delete held[note]; }

function draw() {
  background(20);
  fill(255);
  text(Object.keys(held).map((n) => noteName(+n)).join('  '), 20, 40);   // the keys down now
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  for (let i = 1; i <= 8; i++) {
    fill(255, 90, 31, 60 + pad(i) * 195);
    square(20 + ((i - 1) % 4) * 92, 40 + floor((i - 1) / 4) * 110, 80);
  }
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255, 90, 31);
  circle(width / 2, height / 2, 40 + pad1 * 260);   // swells while pad 1 is held
}

let hits = [];

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function padPressed(n, velocity) {
  hits.push({ x: 40 + ((n - 1) % 4) * 105, y: 70 + floor((n - 1) / 4) * 130, r: 20 + velocity * 60 });
}

function draw() {
  background(20, 40);
  fill(255, 90, 31);
  for (const h of hits) { circle(h.x, h.y, h.r); h.r *= 0.95; }
  hits = hits.filter((h) => h.r > 2);
}

let down = {};

function setup() {
  createCanvas(400, 300);
}

function padPressed(n) { down[n] = true; }
function padReleased(n) { down[n] = false; }

function draw() {
  background(20);
  fill(255, 90, 31);
  for (let i = 1; i <= 8; i++) if (down[i]) square(10 + (i - 1) * 48, 130, 40);   // lit while held
}

let bend = 0;

function setup() {
  createCanvas(400, 300);
}

function pitchBend(value) {
  bend = value;
}

function draw() {
  background(20);
  circle(width / 2 + bend * 150, height / 2, 50);   // wheel up: right, wheel down: left
}

let bend = 0;

function setup() {
  createCanvas(400, 300);
}

function pitchBend(value) { bend = value; }

function mouseDragged() {
  OAVp5.input([0xE0, 0, constrain(round(mouseX / width * 127), 0, 127)]);   // no wheel? drag the mouse
}

function draw() {
  background(20);
  const x = spring(width / 2 + bend * 150, 120, 8);   // a spring smooths the steps
  circle(x, height / 2, 50);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255, 90, 31);
  circle(width / 2, height / 2, 20 + velocity * 300);   // a harder key makes a bigger circle
}

function setup() {
  createCanvas(400, 300);
}

function mouseDragged() {
  OAVp5.input([0xE0, 0, constrain(round(mouseX / width * 127), 0, 127)]);   // no wheel? drag the mouse
}

function draw() {
  background(20);
  circle(width / 2 + OAVp5.bend * 150, height / 2, 50);   // wheel up: right, wheel down: left
  text('bend ' + nf(OAVp5.bend, 1, 2), 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function mouseDragged() {
  OAVp5.input([0xB0, 1, constrain(round(mouseX / width * 127), 0, 127)]);   // no wheel? drag the mouse
}

function draw() {
  background(OAVp5.cc[64] >= 0.5 ? 90 : 20);   // sustain pedal down: lighter
  circle(width / 2, height / 2, 40 + OAVp5.cc[1] * 300);   // mod wheel: size
}

window.OAV_P5 = { hardware: 'click' };   // do not ask at load

let answer = 'click the canvas to ask for Web MIDI';

function setup() {
  createCanvas(400, 300);
}

function mousePressed() {
  OAVp5.connectHardware().then((ok) => { answer = ok ? 'Web MIDI allowed' : 'no Web MIDI for this page'; });
}

function draw() {
  background(20);
  fill(255);
  text(answer, 20, 30);
  text('state: ' + OAVp5.hardware, 20, 60);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255);
  text(OAVp5.devices.length ? 'playing: ' + OAVp5.devices.join(', ') : 'no MIDI controller plugged in', 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(OAVp5.hardware === 'connected' ? color(20, 60, 30) : 20);
  fill(255);
  text('Web MIDI: ' + OAVp5.hardware, 20, 30);
  text('devices: ' + (OAVp5.devices.join(', ') || 'none'), 20, 60);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(40);
}

function mousePressed() { OAVp5.play(60 + floor(random(12)), 0.8); }   // no keys? click

function draw() {
  background(20);
  fill(255);
  text(OAVp5.held.map((n) => noteName(n)).join('  ') || 'play a chord', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(24);
}

function mousePressed() {
  OAVp5.input([0x90, 60 + floor(random(12)), 100]);   // a note-on, as a key would send it
}

function notePressed(note, velocity) {
  background(20);
  fill(255);
  text(noteName(note) + ' (sent by hand)', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
}

function mouseDragged() {
  OAVp5.input([0xB0, 74, constrain(round(mouseX / width * 127), 0, 127)]);   // CC 74 is knob 1 on a MiniLab 3
}

function draw() {
  background(20);
  circle(width / 2, height / 2, 40 + knob1 * 300);
}

function setup() {
  createCanvas(400, 300);
  OAVp5.input([0xB0, 70, 127], 'test', 'akai-lpd8');   // CC 70 is knob 1 on an LPD8
}

function draw() {
  background(20);
  fill(255);
  text('knob1 = ' + knob1 + ' (from the LPD8 numbering)', 20, 30);
  text('last: ' + OAVp5.last.control + ' from ' + OAVp5.last.source, 20, 60);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(32);
}

function mousePressed() { for (const n of ['C4', 'E4', 'G4']) OAVp5.play(n, 0.8); }   // no keys? click for a chord
function mouseReleased() { for (const n of ['C4', 'E4', 'G4']) OAVp5.play(n, 0); }

function draw() {
  const chord = OAVp5.isDown('C4') && OAVp5.isDown('E4') && OAVp5.isDown('G4');
  background(chord ? color(60, 100, 40) : 20);
  fill(255);
  text(chord ? 'C major' : 'hold C4 + E4 + G4', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  textSize(16);
}

function mousePressed() { OAVp5.input([0x90, 60 + floor(random(12)), 100], 'mouse'); }   // no controller? click

function draw() {
  background(20);
  fill(255);
  text(OAVp5.last ? JSON.stringify(OAVp5.last, null, 1) : 'play something', 20, 30);
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  for (let n = 36; n < 96; n++) {   // five octaves, C2 to B6
    const v = OAVp5.note[n];
    fill(v > 0 ? color(255, 211, 107) : 60);
    rect(20 + (n - 36) * 6, height - 40 - v * 200, 5, 40 + v * 200);
  }
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  const v = lag(OAVp5.note[60], 0.05, 0.4);   // middle C, softened
  circle(width / 2, height / 2, 40 + v * 260);
}

let heard = 0;

function setup() {
  createCanvas(400, 300);
  OAVp5.on('noteOn', (note, velocity) => { heard++; });
}

function mousePressed() { OAVp5.play(60 + floor(random(12)), 0.8); }   // no keys? click

function draw() {
  background(20);
  fill(255);
  text('notes heard: ' + heard, 20, 30);
}

let heard = 0;
let off;

function setup() {
  createCanvas(400, 300);
  off = OAVp5.on('noteOn', () => {
    heard++;
    if (heard === 5) off();   // stop listening after five notes
  });
}

function mousePressed() { OAVp5.play(60 + floor(random(12)), 0.8); }

function draw() {
  background(20);
  fill(255);
  text('notes heard: ' + heard + (heard >= 5 ? ' (stopped listening)' : ''), 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function keyPressed() {
  if (key === 'p') OAVp5.panel.toggle();
}

function draw() {
  background(20);
  fill(255);
  text('press p to show or hide the 🎹 panel', 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function keyPressed() {
  if (key === 'o') OAVp5.panel.open();
  if (key === 'c') OAVp5.panel.close();
}

function draw() {
  background(20);
  fill(255);
  text('o: open the 🎹 panel,  c: close it', 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function mousePressed() {
  OAVp5.panel.open().then((panel) => console.log('the panel is', panel ? 'open and loaded' : 'not available'));
}

function draw() {
  background(20);
  fill(255);
  text('click the canvas to open the panel', 20, 30);
}

function setup() {
  createCanvas(400, 300);
}

function mousePressed() {
  const room = OAVp5.phone();   // the QR code card opens
  console.log('phones join room', room);
}

function notePressed(note) {
  background(random(255), random(255), random(255));   // a phone key changes the colour
}

function draw() {
  fill(255);
  text('click the canvas, scan the QR code, open the MIDI tab', 20, 30);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(32);
}

function mousePressed() { midi.play('C4', 0.8); }
function mouseReleased() { midi.play('C4', 0); }

function draw() {
  background(noteIsDown('C4') ? 90 : 20);
  fill(255);
  text('hold the mouse: C4 is ' + (noteIsDown('C4') ? 'down' : 'up'), width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  fill(255);
  const wired = OAVp5.wiring();
  text(wired.length ? wired.map((w) => w.control + ' -> ' + w.name).join('\n') : 'nothing wired (no OPC here)', 20, 30);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(36);
}

function draw() {
  background(20);
  fill(255);
  text('A4 = ' + noteFreq('A4') + ' Hz\nC4 = ' + noteFreq('C4').toFixed(2) + ' Hz', width / 2, height / 2);
}

let shown = 'play a key';

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(64);
}

function notePressed(note) {
  shown = noteName(note) + '  ' + noteName(note, { flats: true });
}

function draw() {
  background(20);
  fill(255);
  text(shown, width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(40);
}

function draw() {
  background(20);
  fill(255);
  text('C4 = ' + noteNumber('C4') + '\nA4 = ' + noteNumber('A4') + '\nF#2 = ' + noteNumber('F#2'), width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  colorMode(HSB, 360, 100, 100);
}

function draw() {
  background(230, 40, 10);
  fill(200 + bass * 160, 70, 100);   // low sounds push the colour toward magenta
  circle(width / 2, height / 2, 80 + bass * 220);
}

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function draw() {
  background(20);
  const bands = [bass, mid, treble];
  for (let i = 0; i < 3; i++) {
    fill(255, 80 + i * 70, 120);
    rect(60 + i * 110, height - 20, 80, -20 - bands[i] * 240);
  }
}

let flash = 0;

function setup() {
  createCanvas(400, 300);
}

function draw() {
  if (beat) flash = 1;        // true for exactly one frame per beat
  background(20 + flash * 200);
  flash *= 0.9;               // fade back down
}

let count = 0;

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
  textSize(96);
}

function draw() {
  if (beat) count++;
  background(20);
  fill(255);
  text(count, width / 2, height / 2);
}

let flash = 0;

function setup() {
  createCanvas(400, 300);
}

function beatDetected(level) {
  flash = 0.4 + level * 0.6;   // louder beat, brighter flash
}

function draw() {
  background(20 + flash * 200);
  flash *= 0.9;
}

let kick = 0, snare = 0;

function setup() {
  createCanvas(400, 300);
  noStroke();
}

function kickDetected(level) { kick = level; }
function snareDetected(level) { snare = level; }

function draw() {
  background(20);
  fill(255, 90, 31);
  circle(120, 150, 40 + kick * 160);
  fill(120, 190, 255);
  circle(280, 150, 40 + snare * 160);
  kick *= 0.9;
  snare *= 0.9;
}

function setup() {
  createCanvas(400, 300);
  startDrums('bd*4, ~ sd ~ sd', 110);
  noStroke();
}

function draw() {
  background(20);
  fill(255, 90, 31, 255 * lag(kickIsDetected, 0, 0.3));    // a kick lights it, then it fades
  circle(130, 200, 140);
  fill(120, 190, 255, 255 * lag(snareIsDetected, 0, 0.3));
  circle(270, 200, 140);
}

function setup() {
  createCanvas(400, 300);
  startDrums('bd*4, ~ sd ~ sd', 110);
  noStroke();
}

function draw() {
  background(20);
  const k = frameCount - lastKickFrameCount;    // frames since the kick
  if (k < 10) {                                 // the ring stays for 10 frames after each kick
    fill(255, 90, 31);
    circle(200, 200, 60 + k * 16);
  }
}

function setup() {
  createCanvas(400, 300);
  startDrums('bd*4, hh*8', 100);
  noStroke();
}

function draw() {
  background(20);
  const ago = millis() - lastKickTs;    // ms since the last kick
  fill(255, 90, 31);
  circle(200, 200, 40 + 160 * exp(-ago / 200));
  fill(255);
  text(isFinite(ago) ? round(ago) + ' ms since the kick' : 'no kick yet', 20, 290);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(micIsOn ? 20 : 90);
  fill(255);
  textAlign(CENTER, CENTER);
  text(micIsOn ? 'listening' : 'allow the microphone', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  circle(width / 2, height / 2, 50 + micLevel * 300);
}

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(20);
  const level = lag(micLevel, 0.03, 0.4);   // opens fast, closes slowly
  fill(255, 120 + level * 135, 60);
  circle(width / 2, height / 2, 50 + level * 300);
}

function setup() {
  createCanvas(400, 300);
  micSensitivity(3);   // a quiet or far-away microphone
}

function draw() {
  background(20);
  fill(255);
  if (!micIsOn) text('Allow the microphone, then make a sound', 20, 30);
  rect(20, height - 40, micLevel * (width - 40), 20);
}

function setup() {
  createCanvas(400, 300);
  micSensitivity(3);   // three times as sensitive
}

function draw() {
  background(20);
  circle(width / 2, height / 2, 50 + micLevel * 300);
  text('sensitivity ' + micSensitivity(), 20, 30);   // no argument: just reads it
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
}

function mousePressed() {
  startMic().then((ok) => console.log(ok ? 'microphone on' : 'no microphone'));
}

function draw() {
  background(20);
  fill(255);
  text(micIsOn ? 'level ' + nf(micLevel, 1, 2) : 'click to start the microphone', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  textAlign(CENTER, CENTER);
}

function keyPressed() {
  if (key === 'm') { if (micIsOn) stopMic(); else startMic(); }
}

function draw() {
  background(20);
  fill(255);
  circle(width / 2, height / 2, 50 + micLevel * 300);
  text('press m to turn the microphone ' + (micIsOn ? 'off' : 'on'), width / 2, height - 24);
}

function setup() {
  createCanvas(400, 300);
}

function mousePressed() {
  if (OAVp5.mic.state === 'on') OAVp5.mic.stop(); else OAVp5.mic.start();
}

function draw() {
  background(20);
  fill(255);
  text('microphone: ' + OAVp5.mic.state + ' (click the canvas to switch it)', 20, 30);   // reading this asks for nothing
  circle(width / 2, height / 2, 50 + OAVp5.mic.level * 300);
}

let bins;

function setup() {
  createCanvas(400, 300);
  noStroke();
  startMic();
}

function draw() {
  background(20);
  const a = OAVp5.mic.analyzer;
  if (!a) return;   // the microphone is not on yet
  bins = bins || new Uint8Array(a.analyser.frequencyBinCount);
  a.analyser.getByteFrequencyData(bins);   // the spectrum, 0..255 per frequency bin
  fill(255, 211, 107);
  for (let i = 0; i < 64; i++) {
    const h = bins[i] / 255 * (height - 20);
    rect(20 + i * 5.8, height - 10 - h, 4, h);
  }
}

function setup() {
  createCanvas(400, 300);
  noStroke();
  startMic();
}

function draw() {
  background(20);
  const bands = [OAVp5.mic.bass, OAVp5.mic.mid, OAVp5.mic.treble];
  for (let i = 0; i < 3; i++) {
    fill(255, 80 + i * 70, 120);
    rect(60 + i * 110, height - 20, 80, -20 - bands[i] * 240);
  }
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(20);
  fill(255);
  text(nf(OAVp5.mic.db, 1, 1) + ' dBFS', 20, 30);
  const own = constrain(map(OAVp5.mic.db, -60, -10, 0, 1), 0, 1);   // an own scale: -60 dB to -10 dB
  circle(width / 2, height / 2, 50 + own * 300);
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(20);
  fill(255);
  text('state: ' + OAVp5.mic.state, 20, 30);
  text('error: ' + OAVp5.mic.error, 20, 60);   // null while all is well
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(20);
  fill(255);
  text('level ' + nf(OAVp5.mic.db, 1, 1) + ' dBFS', 20, 30);
  text('room noise ' + nf(OAVp5.mic.floor, 1, 1) + ' dBFS', 20, 60);
  text('micLevel ' + nf(OAVp5.mic.level, 1, 2), 20, 90);
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(20);
  circle(width / 2, height / 2, 50 + OAVp5.mic.level * 300);
}

let flash = 0;

function setup() {
  createCanvas(400, 300);
  startMic();
  OAVp5.mic.on('beat', (level) => { flash = 0.4 + level * 0.6; });   // louder beat, brighter flash
}

function draw() {
  background(20 + flash * 200);
  flash *= 0.9;
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(20);
  fill(255);
  text('rms ' + nf(OAVp5.mic.rms, 1, 4), 20, 30);
  rect(20, 60, min(OAVp5.mic.rms * 10, 1) * (width - 40), 20);   // magnified 10 times: a voice is small
}

function setup() {
  createCanvas(400, 300);
  micSensitivity(3);   // a quiet or far-away microphone
}

function draw() {
  background(20);
  fill(255);
  text('sensitivity ' + OAVp5.mic.sensitivity, 20, 30);   // 3
  circle(width / 2, height / 2, 50 + micLevel * 300);
}

function setup() {
  createCanvas(400, 300);
}

function mousePressed() {
  OAVp5.mic.start().then((ok) => console.log(ok ? 'microphone on' : 'no microphone'));
}

function draw() {
  background(20);
  fill(255);
  text(OAVp5.mic.state === 'on' ? 'listening' : 'click the canvas to start the microphone', 20, 30);
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function draw() {
  background(OAVp5.mic.state === 'on' ? 20 : color(90, 30, 30));
  fill(255);
  text('microphone: ' + OAVp5.mic.state, 20, 30);
  if (OAVp5.mic.state === 'denied') text('click the lock left of the address and allow it', 20, 60);
}

function setup() {
  createCanvas(400, 300);
  startMic();
}

function mousePressed() {
  OAVp5.mic.stop();   // the browser's recording indicator goes away
}

function draw() {
  background(20);
  fill(255);
  text('microphone: ' + OAVp5.mic.state + ' (click the canvas to stop it)', 20, 30);
  circle(width / 2, height / 2, 50 + OAVp5.mic.level * 300);
}

import { AudioAnalyzer } from '@openav/audio';

const audio = new AudioAnalyzer();
await audio.enableMic();                      // the browser asks for the microphone
const g = document.getElementById('c').getContext('2d');

(function frame() {
  const f = audio.update();                   // { rms, peak, low, mid, high, ... }
  g.fillStyle = '#111'; g.fillRect(0, 0, 400, 300);
  g.fillStyle = '#ffd166';
  g.fillRect(20, 130, Math.min(1, f.rms * 6) * 360, 40);   // a voice is a small rms: scale it
  requestAnimationFrame(frame);
})();

import { AudioAnalyzer } from '@openav/audio';

const audio = new AudioAnalyzer();             // no signals bus: update() just returns the numbers
const input = audio.input();                    // makes the AudioContext (audio.ctx) and the AnalyserNode
const osc = new OscillatorNode(audio.ctx, { frequency: 100 });
osc.connect(input);                             // any node of audio.ctx can feed the analyser
osc.start();

let frames = 0;
(function frame() {
  const f = audio.update();                     // also resumes the context once the page has had a click
  if (++frames < 40) return requestAnimationFrame(frame);
  console.log(audio.ctx.state, f.low > f.high);  // running true: a 100 Hz tone sits in the low band
  console.log(f.rms > 0.1, f.centroid < 0.1);    // true true
})();

import { AudioAnalyzer } from '@openav/audio';
import { Signals } from '@openav/core';

const signals = new Signals();
const audio = new AudioAnalyzer({ signals });         // defines the audio/* signals at once
console.log(signals.list().length);                    // 13
signals.on('audio/onset', ({ rms }) => console.log('onset', rms.toFixed(2)));
signals.on('audio/kick', ({ level }) => console.log('kick', level.toFixed(2)));
console.log(signals.get('audio/rms'));                 // 0, nothing heard yet
console.log(audio.update());                           // null until a source is enabled

function setup() {
  createCanvas(400, 300);
  startSound('organ');
}

function draw() {
  background(20);
  fill(soundIsOn ? color(120, 220, 140) : color(220, 160, 60));
  circle(width / 2, height / 2, 80);
  fill(255);
  textAlign(CENTER);
  text(soundIsOn ? 'sound is on' : 'click the canvas to turn sound on', width / 2, height - 40);
}

let playing = 60;

function setup() {
  createCanvas(400, 300);
  startSound('synth/pluck');   // every key you play is heard
}

function mousePressed() {
  playing = 48 + floor(mouseX / 25);   // low on the left, high on the right
  midi.play(playing, 0.8);
}

function mouseReleased() {
  midi.play(playing, 0);
}

function draw() {
  background(soundIsOn ? 30 : 90);
  fill(255);
  textAlign(CENTER, CENTER);
  text(soundIsOn ? 'click to play a note' : 'click once to turn sound on', width / 2, height / 2);
}

const KEYS = { a: 60, s: 62, d: 64, f: 65, g: 67, h: 69, j: 71, k: 72 };
let dots = [];

function setup() {
  createCanvas(400, 300);
  noStroke();
  startSound('epiano');
}

function keyPressed() {
  if (KEYS[key]) midi.play(KEYS[key], 0.8);
}

function keyReleased() {
  if (KEYS[key]) midi.play(KEYS[key], 0);
}

function notePressed(n, v) {
  dots.push({ x: map(n, 60, 72, 30, width - 30), y: height, v });
}

function draw() {
  background(20);
  for (const d of dots) {
    fill(255, 160, 80);
    circle(d.x, d.y, 20 + d.v * 30);
    d.y -= 2;
  }
  dots = dots.filter((d) => d.y > -40);
  fill(255);
  text(soundIsOn ? 'play with a s d f g h j k' : 'press a key once to turn sound on', 20, 24);
}

const IDS = ['synth/pluck', 'organ', 'marimba', 'piano'];

function setup() {
  createCanvas(400, 300);
  startSound(IDS[0]);
}

function keyPressed() {
  const i = Number(key) - 1;
  if (IDS[i]) startSound(IDS[i]);   // switches while it plays
}

function draw() {
  background(20);
  fill(255);
  const s = OAVp5.sound.status;   // the instrument being loaded
  text('keys 1-4 pick an instrument', 20, 30);
  text('playing: ' + OAVp5.sound.instrument, 20, 60);
  text('loading: ' + s.id + ' (' + s.state + ', ' + nf(s.progress * 100, 1, 0) + '%)', 20, 90);
}

function setup() {
  createCanvas(400, 300);
  startSound('synth/pluck');
  textAlign(CENTER, CENTER);
}

function keyPressed() {
  if (key === 's') {
    if (soundIsOn) stopSound(); else startSound();
  }
}

function draw() {
  background(soundIsOn ? 40 : 100);
  fill(255);
  text('press s: sound is ' + (soundIsOn ? 'on' : 'off'), width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  startSound('harp');
}

function draw() {
  background(20);
  fill(255);
  const s = OAVp5.sound;
  text('state: ' + s.state, 20, 30);
  text('instrument: ' + s.instrument, 20, 60);
  text('error: ' + s.error, 20, 90);
}

function setup() {
  createCanvas(400, 300);
  startSound('strings');
  textAlign(CENTER, CENTER);
}

function draw() {
  background(OAVp5.sound.error ? color(120, 30, 30) : 20);
  fill(255);
  text(OAVp5.sound.error ? OAVp5.sound.error : 'no error', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  startSound('piano');
  textAlign(CENTER, CENTER);
}

function draw() {
  background(20);
  fill(255);
  text(OAVp5.sound.instrument || 'nothing loaded yet', width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  startSound('marimba');
  textAlign(CENTER, CENTER);
  textSize(28);
}

function draw() {
  background(20);
  const hints = { off: 'off', loading: 'loading…', waiting: 'click to hear', on: 'listening', error: 'failed' };
  fill(255);
  text(hints[OAVp5.sound.state], width / 2, height / 2);
}

function setup() {
  createCanvas(400, 300);
  startSound('piano');
  noStroke();
}

function draw() {
  background(20);
  const s = OAVp5.sound.status;
  fill(60);
  rect(40, 140, 320, 16);
  fill(120, 220, 140);
  rect(40, 140, 320 * s.progress, 16);
  fill(255);
  text(s.id + ': ' + s.state, 40, 120);
}

import { BUILTIN_INSTRUMENTS, getInstrument } from '@openav/sound';

console.log(BUILTIN_INSTRUMENTS.length);                                       // 22
console.log(BUILTIN_INSTRUMENTS.slice(0, 3).map((d) => d.id).join(' '));      // piano epiano xylophone
console.log(getInstrument('piano') === BUILTIN_INSTRUMENTS[0]);                // true: they are the registered ones
console.log(getInstrument('organ').params.map((p) => p.key).join(' '));        // drawbars rotor

import { CATEGORIES } from '@openav/sound';

console.log(CATEGORIES.map((c) => c.id).join(' '));   // keys mallets strings plucked organ voice synth drums other
console.log(CATEGORIES[1].name.en, CATEGORIES[1].name.zh);

import { DEFAULT_INSTRUMENT, getInstrument, instrumentName, toneEngine } from '@openav/sound';

console.log(DEFAULT_INSTRUMENT, '-', instrumentName(getInstrument(DEFAULT_INSTRUMENT)));   // synth/pad - Warm pad
console.log(toneEngine().instrument === DEFAULT_INSTRUMENT);                                 // true

import { getInstrument, instrumentName } from '@openav/sound';

const piano = getInstrument('piano');
console.log(instrumentName(piano), '/', piano.category);   // Grand piano (Salamander) / keys
console.log(piano.credit.text);                             // Salamander Grand Piano · Alexander Holm · CC-BY 3.0
console.log(getInstrument('theremin'));                     // null