<bmx-audio-editor>

<div role="group" aria-label="Try it" style="display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center">
  <button type="button" id="ex-ae-find">Find personal data</button>
  <button type="button" id="ex-ae-bleep">Bleep everything found</button>
  <button type="button" id="ex-ae-loud">Measure loudness</button>
  <button type="button" id="ex-ae-wav">Export the redacted call</button>
</div>
<bmx-audio-editor id="ex-ae" label="Call recording" style="--bmx-audio-editor-height: 26rem"></bmx-audio-editor>
<p class="note" id="ex-ae-out" role="status" style="margin: 12px 0 0">A made-up customer call, generated in the page: the agent on one track, the caller on the other, with a transcript. "Find personal data" looks through the transcript for the card number, expiry date, phone number, postcode and email the caller reads out, and through the audio for the security code keyed in on the phone's keypad. The voices are synthetic babble, so listen for the bleeps rather than the words.</p>

<script type="module">
  await customElements.whenDefined('bmx-audio-editor');
  const editor = document.getElementById('ex-ae');
  const out = document.getElementById('ex-ae-out');
  const RATE = 16000;

  // ---- A seeded "voice": a buzzing source through three moving resonances (formants),
  // syllable by syllable, band-limited like a phone line. It sounds like speech from a
  // distance, without being any real person's voice.
  let seed = 20261016;
  const rand = () => ((seed = (seed * 1664525 + 1013904223) >>> 0) / 4294967296);
  const VOWELS = [[800, 1200, 2500], [500, 1900, 2600], [300, 2300, 3000], [500, 900, 2400], [350, 800, 2300], [500, 1500, 2500]];
  const syllables = w => Math.max(1, (w.toLowerCase().replace(/e\b/, '').match(/[aeiouy]+/g) || []).length);

  function speak(buf, start, words, pitch) {
    let t = start;
    const timed = [];
    let phase = 0;
    for (const word of words) {
      const digit = /^(oh|one|two|three|four|five|six|seven|eight|nine|double|zero|[a-z])$/i.test(word.replace(/[,.?]/g, ''));
      const n = syllables(word);
      const dur = digit ? 0.34 : n * 0.17 + 0.04;
      const s = Math.round(t * RATE);
      const e = Math.round((t + dur) * RATE);
      let f = VOWELS[Math.floor(rand() * VOWELS.length)];
      const r = [[0, 0], [0, 0], [0, 0]];
      for (let i = s; i < e && i < buf.length; i++) {
        const k = (i - s) / (e - s);
        const syl = Math.floor(k * n);
        if (Math.floor(((i - 1 - s) / (e - s)) * n) !== syl) f = VOWELS[Math.floor(rand() * VOWELS.length)];
        const inSyl = k * n - syl;
        const env = Math.min(1, inSyl / 0.12, (1 - inSyl) / 0.18) * (0.85 + 0.15 * Math.sin(k * 9));
        const f0 = pitch * (1.08 - 0.16 * k) * (1 + 0.01 * (rand() - 0.5));
        phase = (phase + f0 / RATE) % 1;
        const src = (phase < 0.6 ? phase / 0.6 : (1 - phase) / 0.4) - 0.5 + (inSyl < 0.15 ? (rand() - 0.5) * 0.8 : 0);
        let y = 0;
        f.forEach((F, j) => {
          const rr = Math.exp((-Math.PI * (60 + j * 40)) / RATE);
          const c = 2 * rr * Math.cos((2 * Math.PI * F) / RATE);
          const v = (1 - rr) * src + c * r[j][0] - rr * rr * r[j][1];
          r[j][1] = r[j][0];
          r[j][0] = v;
          y += v * [1, 0.55, 0.3][j];
        });
        buf[i] += Math.max(0, env) * y * 0.9;
      }
      timed.push({ word: word.replace(/^\W+|\W+$/g, '') || word, start: +t.toFixed(3), end: +(t + dur).toFixed(3) });
      t += dur + 0.07;
    }
    return { words: timed, end: t };
  }

  function tone(buf, start, lo, hi, dur = 0.12) {
    const s = Math.round(start * RATE);
    for (let i = 0; i < dur * RATE; i++) buf[s + i] += 0.22 * (Math.sin((2 * Math.PI * lo * i) / RATE) + Math.sin((2 * Math.PI * hi * i) / RATE)) * Math.min(1, i / 40, (dur * RATE - i) / 40);
  }

  // A biquad (low or high pass), for the telephone band of 300 Hz - 3.4 kHz.
  function pass(buf, hz, high) {
    const w = (2 * Math.PI * hz) / RATE, al = Math.sin(w) / Math.SQRT2, c = Math.cos(w), a0 = 1 + al;
    const b = high ? [(1 + c) / 2, -(1 + c), (1 + c) / 2] : [(1 - c) / 2, 1 - c, (1 - c) / 2];
    let x1 = 0, x2 = 0, y1 = 0, y2 = 0;
    for (let i = 0; i < buf.length; i++) {
      const y = (b[0] * buf[i] + b[1] * x1 + b[2] * x2 + 2 * c * y1 - (1 - al) * y2) / a0;
      x2 = x1; x1 = buf[i]; y2 = y1; y1 = y; buf[i] = y;
    }
  }

  const script = [
    ['agent', "Good morning, you're through to Kestrel Home Energy. How can I help today?"],
    ['caller', "Hi, I'd like to pay my winter bill please."],
    ['agent', 'Of course. Can I take the postcode on the account?'],
    ['caller', "Yes, it's B S one three nine Z Z."],
    ['agent', 'Thank you. And the best number to reach you on?'],
    ['caller', 'Oh seven seven double oh nine double oh one two three.'],
    ['agent', 'Lovely. The balance is one hundred and twelve pounds forty. Can I take the long number on the card?'],
    ['caller', 'Sure. Four one one one, one one one one, one one one one, one one one one.'],
    ['agent', 'And the expiry date?'],
    ['caller', 'Oh nine twenty eight.'],
    ['agent', 'Thanks. For security, please key in the three digit code from the back of the card on your keypad now.'],
    ['keys', '739'],
    ['agent', "That's gone through. Can I send the receipt by email?"],
    ['caller', "Yes, it's sam dot carter at example dot com."],
    ['agent', 'All done. Thank you for calling, have a lovely day.'],
    ['caller', 'You too, bye.'],
  ];
  const LENGTH = 62;
  const agent = new Float32Array(LENGTH * RATE);
  const caller = new Float32Array(LENGTH * RATE);
  const segments = [];
  let t = 0.6;
  const KEYS = { 7: [852, 1209], 3: [697, 1477], 9: [852, 1477] };
  for (const [who, text] of script) {
    if (who === 'keys') {
      t += 0.8;
      for (const k of text) {
        tone(caller, t, ...KEYS[k]);
        t += 0.45;
      }
      t += 0.6;
      continue;
    }
    const r = speak(who === 'agent' ? agent : caller, t, text.split(' '), who === 'agent' ? 205 : 118);
    segments.push({ speaker: who === 'agent' ? 'Agent' : 'Caller', words: r.words });
    t = r.end + 0.45 + rand() * 0.4;
  }
  for (const buf of [agent, caller]) {
    for (let i = 0; i < buf.length; i++) buf[i] += (rand() - 0.5) * 0.004;
    pass(buf, 300, true);
    pass(buf, 3400, false);
  }

  editor.project = {
    title: 'Call 2291 - card payment',
    sampleRate: RATE,
    channels: 2,
    tracks: [
      { id: 'agent', name: 'Agent', gain: 0, pan: -0.4 },
      { id: 'caller', name: 'Caller', gain: 0, pan: 0.4 },
    ],
    clips: [
      { id: 'a', track: 'agent', source: 'agent', start: 0, offset: 0, duration: LENGTH, name: 'Agent' },
      { id: 'c', track: 'caller', source: 'caller', start: 0, offset: 0, duration: LENGTH, name: 'Caller' },
    ],
    // A marker where the caller starts reading out the card.
    markers: [{ time: segments[7].words[1].start, label: 'Card details' }],
  };
  await editor.addAudio({ sampleRate: RATE, channels: [agent] }, { id: 'agent', name: 'Agent', sourceOnly: true });
  await editor.addAudio({ sampleRate: RATE, channels: [caller] }, { id: 'caller', name: 'Caller', sourceOnly: true });
  editor.transcript = { segments };

  let found = [];
  document.getElementById('ex-ae-find').addEventListener('click', async () => {
    editor.panel = 'redact';
    found = await editor.findRedactions();
    out.textContent = `findRedactions(): ${found.map(f => `${f.label} at ${f.start.toFixed(1)} s`).join(', ')}.`;
  });
  document.getElementById('ex-ae-bleep').addEventListener('click', async () => {
    if (!found.length) found = await editor.findRedactions();
    await editor.applyRedactions(found, 'bleep');
    editor.panel = 'redact';
    out.textContent = `applyRedactions(): ${found.length} ranges bleeped across both tracks. Press play, or export the redaction log from Export.`;
  });
  document.getElementById('ex-ae-loud').addEventListener('click', async () => {
    editor.panel = 'levels';
    const l = await editor.measureLoudness();
    out.textContent = `measureLoudness(): ${l.integrated.toFixed(1)} LUFS integrated, peak ${l.samplePeak.toFixed(1)} dBFS, range ${l.range.toFixed(1)} LU.`;
  });
  document.getElementById('ex-ae-wav').addEventListener('click', async () => {
    const wav = await editor.exportWav({ bits: 16 });
    out.textContent = `exportWav(): ${(wav.size / 1024).toFixed(0)} KB of 16-bit WAV - the bleeps are in the file, the card number is not.`;
  });
  editor.addEventListener('bmxChange', e => (out.textContent = `bmxChange (${e.detail.reason}): ${e.detail.project.clips.length} clips, ${e.detail.project.redactions.length} redactions, ${e.detail.project.markers.length} markers.`));
</script>