4-1 Vanilla Web Audio API

let audioContext;
let analyser;
let dataArray;
let isStarted = false;

function setup() {
  createCanvas(windowWidth, windowHeight);

  // テキストクリックでオーディオコンテキストを開始する設定
  textAlign(CENTER, CENTER);
  textSize(24);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}

function draw() {
  background(20);

  if (!isStarted) {
    fill(255);
    text("Click to Start Microphone (Web Audio API)", width / 2, height / 2);
    return;
  }

  // AnalyserNode から周波数データを取得
  // dataArray に 0〜255 の値が格納される
  analyser.getByteFrequencyData(dataArray);

  // スペクトルの描画（1-2サンプルの p5.sound 版と同じ論理）
  let bufferLength = analyser.frequencyBinCount;
  let barWidth = width / bufferLength;

  for (let i = 0; i < bufferLength; i++) {
    let amp = dataArray[i]; // 現在の周波数帯域の振幅
    let y = map(amp, 0, 255, height, 0);

    fill(map(i, 0, bufferLength, 0, 360), 80, 100);
    rect(i * barWidth, y, barWidth - 1, height - y);
  }

  fill(255);
  textAlign(LEFT, TOP);
  textSize(24);
  text("Vanilla Web Audio API (AnalyserNode)", 20, 20);
}

// ユーザーのクリックでマイク接続とWeb Audio APIを開始
async function mousePressed() {
  if (isStarted) return;

  try {
    // 1. AudioContext の作成
    audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // 2. マイクへのアクセス要求
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

    // 3. マイクからの入力ストリームを AudioContext に接続
    const source = audioContext.createMediaStreamSource(stream);

    // 4. 解析用ノード (AnalyserNode) を作成
    analyser = audioContext.createAnalyser();
    analyser.fftSize = 256; // FFTサイズを設定（取得できるデータ数はこの半分になる）

    // 5. ソースをアナライザーに接続
    // 注意: アナライザーから先（destination）には繋がない（ハウリングを防ぐため）
    source.connect(analyser);

    // 6. データを格納する配列の用意
    const bufferLength = analyser.frequencyBinCount; // fftSizeの半分 (128)
    dataArray = new Uint8Array(bufferLength);

    isStarted = true;
  } catch (err) {
    console.error("Error accessing microphone:", err);
    alert("マイクへのアクセスが拒否されたか、エラーが発生しました。");
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}