音频上下文仅在点击 iPhone 后恢复

Question

我正在使用 rnbo (max msp) 和 p5.js 构建一个网站。我创建了一个音频上下文，在桌面上一切正常，但在我的 iPhone 上，我总是必须在 audicontext.state 从挂起更改为运行之前在显示屏上点击一次。我不明白为什么。我很乐意提供帮助！

直播：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

这是 Safari 的自动播放保护。仅当用户事件（例如按钮上的事件处理程序）触发网页时，才允许网页播放音频。