Function drawDiagnostics

core/http/static/talk.js:460–569

()

}

function drawDiagnostics() {
  if (!analyser || !diagVisible) {
    diagAnimFrame = null;
    return;
  }

  diagAnimFrame = requestAnimationFrame(drawDiagnostics);

  // ── Waveform ──
  const waveCanvas = document.getElementById('waveformCanvas');
  const wCtx = waveCanvas.getContext('2d');
  const timeData = new Float32Array(analyser.fftSize);
  analyser.getFloatTimeDomainData(timeData);

  const w = waveCanvas.width;
  const h = waveCanvas.height;
  wCtx.fillStyle = '#000';
  wCtx.fillRect(0, 0, w, h);
  wCtx.strokeStyle = '#0f0';
  wCtx.lineWidth = 1;
  wCtx.beginPath();
  const sliceWidth = w / timeData.length;
  let x = 0;
  for (let i = 0; i < timeData.length; i++) {
    const y = (1 - timeData[i]) * h / 2;
    if (i === 0) wCtx.moveTo(x, y);
    else wCtx.lineTo(x, y);
    x += sliceWidth;
  }
  wCtx.stroke();

  // Compute RMS
  let sumSq = 0;
  for (let i = 0; i < timeData.length; i++) sumSq += timeData[i] * timeData[i];
  const rms = Math.sqrt(sumSq / timeData.length);
  const rmsDb = rms > 0 ? (20 * Math.log10(rms)).toFixed(1) : '-Inf';
  document.getElementById('statRMS').textContent = rmsDb + ' dBFS';

  // ── FFT Spectrum ──
  const specCanvas = document.getElementById('spectrumCanvas');
  const sCtx = specCanvas.getContext('2d');
  const freqData = new Float32Array(analyser.frequencyBinCount);
  analyser.getFloatFrequencyData(freqData);

  const sw = specCanvas.width;
  const sh = specCanvas.height;
  sCtx.fillStyle = '#000';
  sCtx.fillRect(0, 0, sw, sh);

  // Draw spectrum (0 to 4kHz range for speech/tone analysis)
  const sampleRate = audioCtx.sampleRate;
  const binHz = sampleRate / analyser.fftSize;
  const maxFreqDisplay = 4000;
  const maxBin = Math.min(Math.ceil(maxFreqDisplay / binHz), freqData.length);
  const barWidth = sw / maxBin;

  sCtx.fillStyle = '#0cf';
  let peakBin = 0;