audiocontext only resumes after tap on iphone

Question

i'm building a website using rnbo (max msp) and p5.js. i create an audiocontext and everything works fine on desktop but on my iphone i always have to tap once on the display before the audicontext.state will change from suspended to running. i dont understand why. i would be happy for help!

live: http://reto.jnst.de/tests/colorkopie/

function setup() {
  canvas = createCanvas(displayWidth, displayHeight);

  colorMode(HSB, 360, 100, 100);

  audioContext = new (window.AudioContext || window.webkitAudioContext)();

  loadRNBO();
 
  canvas.touchStarted(startAudioContext);
  
  
}

function startAudioContext() {
  if (audioContext.state === "suspended") {
    audioContext.resume();
    console.log(audioContext.state);
  }
}

async function loadRNBO() {
  const { createDevice } = RNBO;

  await audioContext.resume();

  const rawPatcher = await fetch("patch.export.json");
  const patcher = await rawPatcher.json();

  device = await createDevice({ context: audioContext, patcher });
  device.node.connect(audioContext.destination);

  x = device.parametersById.get("x");
  y = device.parametersById.get("y");
  mode = device.parametersById.get("mode");
  gain = device.parametersById.get("gain");
}

function touchMoved() {

  // viusals:
  // …

  // sound:

  let xValue = (mouseX / windowWidth) * 100;
  let yValue = (mouseY / windowHeight) * 100;

  gainValue = 127;

  if (y) {
    y.value = yValue;
  }

  if (x) {
    x.value = xValue;
  }

  if (mode) {
    mode.value = modeValue;
  }

  if (gain) {
    gain.value = gainValue;
  }
}

function touchEnded() {
  background(255);
  if (gain) {
    gain.value = 0;
  }
}

Answer 1

This is Safaris autoplay protection. A webpage is only allowed to play audio if an user event (such as an event handler on a button) has triggered it.