update inline examples (#388)

[therewasaguy]

• Update inline examples to start audio context on a user gesture, either by playing a sound (soundFile.play() / oscillator.start()) or by explicitly calling userStartAudio() https://github.com/processing/p5.js-sound/issues/388
• Use let in examples, instead of var, but not const, as discussed in this issue where it was decided to use let exclusively in examples: replace const with let in reference examples p5.js#3877
• Update styles for consistency with other p5 inline examples

So far, some examples use soundFile.play() or oscillator.start() rather than a potentially redundant call to userStartAudio(). It might be worth that redundant call, because the difference between methods that call "start" on a WebAudio node (thus enabling audio on a user gesture) and those that do not is pretty obfuscated...

[therewasaguy]

One potential improvement would be to wrap the text in a conditional like

if (getAudioContext().state !== 'running') {
  text('tap to play', width/2, 20);
}

Or

var tapped = false;

function setup() {
  cnv = createCanvas();
  cnv.mousePressed(toggleSound);
}

function draw() {
  if (!tapped) {
    text('tap to play', width/2, 20);
  }
}

function toggleSound() {
  tapped = true;
  // make noise !
}

or, maybe there is a less verbose way...

[therewasaguy]

This may be worth discussing (just updated) but I am going to merge and if anybody is inspired to iterate on examples from here, please feel free!!

So far, some examples use soundFile.play() or oscillator.start() rather than a potentially redundant call to userStartAudio(). It might be worth that redundant call, because the difference between methods that call "start" on a WebAudio node (thus enabling audio on a user gesture) and those that do not is pretty obfuscated...