@jjlmoya/utils-forensic-science 1.11.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-forensic-science",
-    "version": "1.11.0",
+    "version": "1.13.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -15,6 +15,7 @@ import { forensicFingerprintMinutiaeIdentifier } from '../tool/forensic-fingerpr
 import { firePatternOriginAnalyzer } from '../tool/fire-pattern-origin-analyzer/entry';
 import { forensicToolmarkStriationMatcher } from '../tool/forensic-toolmark-striation-matcher/entry';
 import { timeOfDeathAlgorMortisCalculator } from '../tool/time-of-death-algor-mortis-calculator/entry';
+import { voiceSpectrogramAnalyzer } from '../tool/voice-spectrogram-analyzer/entry';
 
 export const forensicCategory: ScienceCategoryEntry = {
   icon: 'mdi:fingerprint',
@@ -34,7 +35,8 @@ export const forensicCategory: ScienceCategoryEntry = {
     forensicFingerprintMinutiaeIdentifier,
     firePatternOriginAnalyzer,
     forensicToolmarkStriationMatcher,
-    timeOfDeathAlgorMortisCalculator
+    timeOfDeathAlgorMortisCalculator,
+    voiceSpectrogramAnalyzer
   ],
 
 

package/src/entries.ts

@@ -30,6 +30,8 @@ export { forensicToolmarkStriationMatcher } from './tool/forensic-toolmark-stria
 export type { ToolmarkStriationMatcherUI, ToolmarkStriationMatcherLocaleContent } from './tool/forensic-toolmark-striation-matcher/entry';
 export { timeOfDeathAlgorMortisCalculator } from './tool/time-of-death-algor-mortis-calculator/entry';
 export type { TimeOfDeathAlgorMortisUI, TimeOfDeathAlgorMortisLocaleContent } from './tool/time-of-death-algor-mortis-calculator/entry';
+export { voiceSpectrogramAnalyzer } from './tool/voice-spectrogram-analyzer/entry';
+export type { VoiceSpectrogramUI, VoiceSpectrogramLocaleContent } from './tool/voice-spectrogram-analyzer/entry';
 
 import { forensicAgeEstimator } from './tool/forensic-age-estimator/entry';
 import { widmarkAlcoholSimulator } from './tool/widmark-alcohol-simulator/entry';
@@ -47,6 +49,7 @@ import { forensicFingerprintMinutiaeIdentifier } from './tool/forensic-fingerpri
 import { firePatternOriginAnalyzer } from './tool/fire-pattern-origin-analyzer/entry';
 import { forensicToolmarkStriationMatcher } from './tool/forensic-toolmark-striation-matcher/entry';
 import { timeOfDeathAlgorMortisCalculator } from './tool/time-of-death-algor-mortis-calculator/entry';
+import { voiceSpectrogramAnalyzer } from './tool/voice-spectrogram-analyzer/entry';
 
 export const ALL_ENTRIES = [
   forensicAgeEstimator,
@@ -64,7 +67,8 @@ export const ALL_ENTRIES = [
   forensicFingerprintMinutiaeIdentifier,
   firePatternOriginAnalyzer,
   forensicToolmarkStriationMatcher,
-  timeOfDeathAlgorMortisCalculator
+  timeOfDeathAlgorMortisCalculator,
+  voiceSpectrogramAnalyzer
 ];
 
 

package/src/index.ts

@@ -15,6 +15,7 @@ export { BLOODSTAIN_PATTERN_ORIGIN_ANALYZER_TOOL } from './tool/bloodstain-patte
 export { FORENSIC_FINGERPRINT_MINUTIAE_IDENTIFIER_TOOL } from './tool/forensic-fingerprint-minutiae-identifier/index';
 export { FIRE_PATTERN_ORIGIN_ANALYZER_TOOL } from './tool/fire-pattern-origin-analyzer/index';
 export { FORENSIC_TOOLMARK_STRIATION_MATCHER_TOOL } from './tool/forensic-toolmark-striation-matcher/index';
+export { VOICE_SPECTROGRAM_ANALYZER_TOOL } from './tool/voice-spectrogram-analyzer/index';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

@@ -18,7 +18,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-    it('all 16 tools registered', () => {
-      expect(ALL_TOOLS.length).toBe(16);
+    it('all 17 tools registered', () => {
+      expect(ALL_TOOLS.length).toBe(17);
   });
 });

package/src/tests/spanish_leakage.test.ts

@@ -28,6 +28,8 @@ const TRANSLATABLE_KEYS = [
   'schemas',
 ] as const;
 
+const COPY_THRESHOLD = 0.9;
+
 const SPANISH_MARKERS = [
   ['sangre', /\bsangre\b/gi],
   ['molino', /\bmolino\b/gi],
@@ -65,12 +67,16 @@ function normalize(value: string): string {
 }
 
 function isTechnicalInvariant(text: string): boolean {
+  const ledUnitMatches = text.match(/\b\d+(?:-\d+)?\s*(?:w|lm)\b/g) ?? [];
   return [
     'data:image/svg+xml;base64',
     'background-image: url',
     '.layout-playground {',
     'const samplerate =',
-  ].some((pattern) => text.includes(pattern)) || (text.includes('presets') && text.includes('hz'));
+  ].some((pattern) => text.includes(pattern)) ||
+    (text.includes('presets') && text.includes('hz')) ||
+    (text.includes('t_rectal') && text.includes('exp(-k * t)')) ||
+    (text.includes('led') && ledUnitMatches.length >= 3);
 }
 
 function collectString(value: string, output: string[]): void {
@@ -111,10 +117,26 @@ function findSpanishMarkers(text: string[]): string[] {
   );
 }
 
+function similarity(left: string, right: string): number {
+  const leftTokens = left.split(/\s+/);
+  const rightCounts = new Map<string, number>();
+  right.split(/\s+/).forEach((token) => rightCounts.set(token, (rightCounts.get(token) ?? 0) + 1));
+  const matches = leftTokens.reduce((total, token) => {
+    const count = rightCounts.get(token) ?? 0;
+    if (count > 0) rightCounts.set(token, count - 1);
+    return total + (count > 0 ? 1 : 0);
+  }, 0);
+  return (2 * matches) / (leftTokens.length + right.split(/\s+/).length);
+}
+
 function findCopiedFragments(spanish: string[], translated: string[]): string[] {
-  const corpus = translated.join(' ');
   return spanish
-    .filter((fragment) => fragment.length >= 80 && corpus.includes(fragment))
+    .filter((fragment) => fragment.length >= 80)
+    .filter((fragment) => translated.some((candidate) =>
+      candidate.length >= 80 &&
+      Math.min(fragment.length, candidate.length) / Math.max(fragment.length, candidate.length) >= COPY_THRESHOLD &&
+      similarity(fragment, candidate) >= COPY_THRESHOLD,
+    ))
     .sort((a, b) => b.length - a.length)
     .slice(0, 3);
 }

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { scienceCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 16 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(16);
+    it('should have 17 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(17);
     });
 
     it('scienceCategory should be defined', () => {

package/src/tool/voice-spectrogram-analyzer/audio-runtime.ts

@@ -0,0 +1,75 @@
+const MAX_FILE_BYTES = 25 * 1024 * 1024;
+const MAX_SECONDS = 20;
+
+export interface DecodedAudio {
+  samples: Float32Array;
+  sampleRate: number;
+}
+
+export interface PlaybackCallbacks {
+  progress: (ratio: number) => void;
+  ended: () => void;
+}
+
+function getAudioContext(): AudioContext {
+  const Constructor = window.AudioContext;
+  if (!Constructor) throw new Error('browser');
+  return new Constructor();
+}
+
+function downmix(buffer: AudioBuffer): Float32Array {
+  const length = Math.min(buffer.length, Math.floor(buffer.sampleRate * MAX_SECONDS));
+  const output = new Float32Array(length);
+  for (let channel = 0; channel < buffer.numberOfChannels; channel += 1) {
+    const source = buffer.getChannelData(channel);
+    for (let index = 0; index < length; index += 1) output[index] = output[index]! + (source[index]! / buffer.numberOfChannels);
+  }
+  return output;
+}
+
+export async function decodeAudioFile(file: File): Promise<DecodedAudio> {
+  if (file.size > MAX_FILE_BYTES) throw new Error('limit');
+  const context = getAudioContext();
+  try {
+    const buffer = await context.decodeAudioData(await file.arrayBuffer());
+    return { samples: downmix(buffer), sampleRate: buffer.sampleRate };
+  } finally {
+    await context.close();
+  }
+}
+
+export class AudioPlayer {
+  private context: AudioContext | null = null;
+  private source: AudioBufferSourceNode | null = null;
+  private frame = 0;
+
+  stop(): void {
+    cancelAnimationFrame(this.frame);
+    try {
+      if (this.source) this.source.onended = null;
+      this.source?.stop();
+    } catch {}
+    this.source = null;
+  }
+
+  async play(audio: DecodedAudio, callbacks: PlaybackCallbacks): Promise<void> {
+    this.stop();
+    this.context ??= getAudioContext();
+    await this.context.resume();
+    const buffer = this.context.createBuffer(1, audio.samples.length, audio.sampleRate);
+    buffer.copyToChannel(new Float32Array(audio.samples), 0);
+    const source = this.context.createBufferSource();
+    source.buffer = buffer;
+    source.connect(this.context.destination);
+    const started = this.context.currentTime;
+    source.onended = callbacks.ended;
+    this.source = source;
+    source.start();
+    const tick = (): void => {
+      if (this.source !== source || !this.context) return;
+      callbacks.progress(Math.min(1, (this.context.currentTime - started) / buffer.duration));
+      this.frame = requestAnimationFrame(tick);
+    };
+    tick();
+  }
+}

package/src/tool/voice-spectrogram-analyzer/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { voiceSpectrogramAnalyzer } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await voiceSpectrogramAnalyzer.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/voice-spectrogram-analyzer/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Koenig, Dunn and Lacy (1946) - The Sound Spectrograph, Journal of the Acoustical Society of America',
+    url: 'https://doi.org/10.1121/1.1916342'
+  },
+  {
+    name: 'Peterson and Barney (1952) - Control Methods Used in a Study of the Vowels, Journal of the Acoustical Society of America',
+    url: 'https://doi.org/10.1121/1.1906875'
+  },
+  {
+    name: 'Hillenbrand, Getty, Clark and Wheeler (1995) - Acoustic Characteristics of American English Vowels, Journal of the Acoustical Society of America',
+    url: 'https://doi.org/10.1121/1.411872'
+  }
+];

package/src/tool/voice-spectrogram-analyzer/component.astro

@@ -0,0 +1,116 @@
+---
+import './voice-spectrogram-analyzer.css';
+import type { VoiceSpectrogramUI } from './ui';
+
+interface Props {
+  ui: VoiceSpectrogramUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="voice-spectrogram" data-voice-spectrogram>
+  <div class="voice-spectrogram-privacy">
+    <span>{ui.privacyBadge}</span>
+    <p>{ui.privacyNote}</p>
+  </div>
+
+  <section class="voice-spectrogram-load" aria-labelledby="voice-load-heading">
+    <div class="voice-spectrogram-section-intro">
+      <p class="voice-spectrogram-kicker">{ui.loadHeading}</p>
+      <span>{ui.presetHint}</span>
+    </div>
+    <div class="voice-spectrogram-samples">
+      {(['a', 'b'] as const).map((key) => (
+        <article class={`voice-spectrogram-sample voice-spectrogram-sample-${key}`} data-card={key} data-state="ready">
+          <div class="voice-spectrogram-sample-index">{key === 'a' ? ui.sampleALabel : ui.sampleBLabel}</div>
+          <div class="voice-spectrogram-drop" data-drop={key}>
+            <div>
+              <strong data-name={key}>{key === 'a' ? ui.presetWarmLabel : ui.presetBrightLabel}</strong>
+              <span data-status={key}>{ui.readySampleLabel}</span>
+            </div>
+            <label class="voice-spectrogram-file">
+              <span>{ui.chooseFileLabel}</span>
+              <input type="file" accept="audio/*" data-file={key} />
+            </label>
+            <small>{ui.dropHint}</small>
+          </div>
+          <div class="voice-spectrogram-sample-foot">
+            <span data-duration={key}>{ui.durationLabel} 0:02</span>
+            <div class="voice-spectrogram-presets">
+              <button type="button" data-preset="warm" data-track={key}>{ui.presetWarmLabel}</button>
+              <button type="button" data-preset="bright" data-track={key}>{ui.presetBrightLabel}</button>
+            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+  </section>
+
+  <section class="voice-spectrogram-instrument" aria-label={ui.stageLabel}>
+    <div class="voice-spectrogram-instrument-head">
+      <div>
+        <span class="voice-spectrogram-live-dot"></span>
+        <strong data-stage-status>{ui.statusReadyLabel}</strong>
+      </div>
+      <div class="voice-spectrogram-control-clusters">
+        <div class="voice-spectrogram-segmented" aria-label={ui.ceilingHeading}>
+          <span>{ui.ceilingHeading}</span>
+          <button type="button" data-ceiling="4000">{ui.ceilingFourLabel}</button>
+          <button type="button" data-ceiling="6000" class="is-active">{ui.ceilingSixLabel}</button>
+          <button type="button" data-ceiling="8000">{ui.ceilingEightLabel}</button>
+        </div>
+        <div class="voice-spectrogram-segmented" aria-label={ui.stageLabel}>
+          <button type="button" data-view="mirror" class="is-active">{ui.mirrorViewLabel}</button>
+          <button type="button" data-view="split">{ui.splitViewLabel}</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="voice-spectrogram-plate">
+      <canvas aria-label={`${ui.stageLabel}. ${ui.educationalNote}`}></canvas>
+      <div class="voice-spectrogram-plate-glow"></div>
+    </div>
+
+    <div class="voice-spectrogram-transport">
+      <button type="button" data-play="a"><span>A</span>{ui.playALabel}</button>
+      <button type="button" data-stop class="voice-spectrogram-stop">{ui.stopLabel}</button>
+      <button type="button" data-play="b"><span>B</span>{ui.playBLabel}</button>
+    </div>
+    <div class="voice-spectrogram-legend">
+      <span><i class="voice-spectrogram-swatch voice-spectrogram-swatch-a"></i>{ui.sampleALabel}</span>
+      <span><i class="voice-spectrogram-swatch voice-spectrogram-swatch-b"></i>{ui.sampleBLabel}</span>
+      <span><i class="voice-spectrogram-line"></i>{ui.formantLegendLabel}</span>
+      <span>{ui.intensityLegendLabel}</span>
+    </div>
+  </section>
+
+  <section class="voice-spectrogram-comparison" aria-labelledby="voice-comparison-heading">
+    <div class="voice-spectrogram-comparison-copy">
+      <p class="voice-spectrogram-kicker" id="voice-comparison-heading">{ui.comparisonHeading}</p>
+      <p>{ui.comparisonNote}</p>
+    </div>
+    <div class="voice-spectrogram-formants">
+      {[ui.formantOneLabel, ui.formantTwoLabel, ui.formantThreeLabel].map((label, index) => (
+        <article>
+          <span class="voice-spectrogram-formant-index">F{index + 1}</span>
+          <strong>{label}</strong>
+          <dl>
+            <div><dt>A</dt><dd data-value={`a-${index}`}>{ui.unavailableLabel}</dd></div>
+            <div><dt>B</dt><dd data-value={`b-${index}`}>{ui.unavailableLabel}</dd></div>
+            <div><dt>{ui.differenceLabel}</dt><dd data-value={`d-${index}`}>{ui.unavailableLabel}</dd></div>
+          </dl>
+        </article>
+      ))}
+    </div>
+  </section>
+
+  <p class="voice-spectrogram-educational">{ui.educationalNote}</p>
+  <script is:inline type="application/json" data-voice-content set:html={JSON.stringify(ui)}></script>
+</div>
+
+<script>
+  import { mountVoiceSpectrogram } from './controller';
+
+  document.querySelectorAll<HTMLElement>('[data-voice-spectrogram]').forEach(mountVoiceSpectrogram);
+</script>

package/src/tool/voice-spectrogram-analyzer/controller.ts

@@ -0,0 +1,219 @@
+import { AudioPlayer, decodeAudioFile } from './audio-runtime';
+import type { DecodedAudio } from './audio-runtime';
+import { renderSpectrogram } from './dom-views';
+import { evaluateStage } from './evaluator';
+import type { SampleState } from './evaluator';
+import { analyzeSamples, compareFormants, createSyntheticVowel, formatDuration } from './logic';
+import type { SpectrogramAnalysis, SyntheticVowel } from './logic';
+import { loadSettings, saveSettings } from './storage';
+import type { SpectrogramSettings } from './storage';
+import type { VoiceSpectrogramUI } from './ui';
+
+type TrackKey = 'a' | 'b';
+
+interface Track extends DecodedAudio {
+  name: string;
+  state: SampleState;
+  analysis: SpectrogramAnalysis;
+  error: string;
+}
+
+interface AppState {
+  tracks: Record<TrackKey, Track>;
+  settings: SpectrogramSettings;
+  active: TrackKey | null;
+  progress: number;
+}
+
+interface ViewContext {
+  root: HTMLElement;
+  canvas: HTMLCanvasElement;
+  state: AppState;
+  ui: VoiceSpectrogramUI;
+}
+
+const presets = {
+  warm: { fundamental: 118, formants: [650, 1080, 2450], duration: 2.8, sampleRate: 16000 },
+  bright: { fundamental: 205, formants: [340, 2650, 3380], duration: 2.8, sampleRate: 16000 }
+} satisfies Record<string, SyntheticVowel>;
+
+function requireElement<T extends Element>(root: ParentNode, selector: string): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Missing ${selector}`);
+  return element;
+}
+
+function parseUI(root: HTMLElement): VoiceSpectrogramUI {
+  const script = requireElement<HTMLScriptElement>(root, '[data-voice-content]');
+  return JSON.parse(script.textContent ?? '{}') as VoiceSpectrogramUI;
+}
+
+function presetTrack(key: keyof typeof presets, name: string, ceilingHz: number): Track {
+  const config = presets[key];
+  const samples = createSyntheticVowel(config);
+  return { samples, sampleRate: config.sampleRate, name, state: 'ready', analysis: analyzeSamples(samples, config.sampleRate, ceilingHz), error: '' };
+}
+
+function initialState(ui: VoiceSpectrogramUI): AppState {
+  const settings = loadSettings();
+  return {
+    settings,
+    tracks: {
+      a: presetTrack('warm', ui.presetWarmLabel, settings.ceilingHz),
+      b: presetTrack('bright', ui.presetBrightLabel, settings.ceilingHz)
+    },
+    active: null,
+    progress: 0
+  };
+}
+
+function stateLabel(track: Track, ui: VoiceSpectrogramUI): string {
+  const labels: Record<SampleState, string> = {
+    empty: ui.emptySampleLabel,
+    decoding: ui.decodingSampleLabel,
+    ready: ui.readySampleLabel,
+    error: ui.errorSampleLabel
+  };
+  return track.error || labels[track.state];
+}
+
+function setText(root: HTMLElement, selector: string, text: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = text;
+}
+
+function renderTrack(root: HTMLElement, key: TrackKey, track: Track, ui: VoiceSpectrogramUI): void {
+  setText(root, `[data-name="${key}"]`, track.name);
+  setText(root, `[data-status="${key}"]`, stateLabel(track, ui));
+  setText(root, `[data-duration="${key}"]`, `${ui.durationLabel} ${formatDuration(track.analysis.duration)}`);
+  const card = root.querySelector<HTMLElement>(`[data-card="${key}"]`);
+  if (card) card.dataset.state = track.state;
+  track.analysis.averages?.forEach((value, index) => setText(root, `[data-value="${key}-${index}"]`, `${value} Hz`));
+}
+
+function renderComparison(root: HTMLElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  const delta = compareFormants(state.tracks.a.analysis.averages, state.tracks.b.analysis.averages);
+  for (let index = 0; index < 3; index += 1) {
+    setText(root, `[data-value="d-${index}"]`, delta ? `${delta[index]} Hz` : ui.unavailableLabel);
+  }
+}
+
+function stageStatusLabel(state: AppState, ui: VoiceSpectrogramUI): string {
+  const evaluation = evaluateStage(state.tracks.a.state, state.tracks.b.state);
+  if (evaluation.key === 'ready') return ui.statusReadyLabel;
+  if (evaluation.key === 'single') return ui.statusSingleLabel;
+  return ui.statusEmptyLabel;
+}
+
+function renderControls(root: HTMLElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  root.querySelectorAll<HTMLElement>('[data-ceiling]').forEach((button) => button.classList.toggle('is-active', Number(button.dataset.ceiling) === state.settings.ceilingHz));
+  root.querySelectorAll<HTMLElement>('[data-view]').forEach((button) => button.classList.toggle('is-active', button.dataset.view === state.settings.view));
+  setText(root, '[data-stage-status]', stageStatusLabel(state, ui));
+}
+
+function render(root: HTMLElement, canvas: HTMLCanvasElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  renderTrack(root, 'a', state.tracks.a, ui);
+  renderTrack(root, 'b', state.tracks.b, ui);
+  renderComparison(root, state, ui);
+  renderControls(root, state, ui);
+  renderSpectrogram(root, canvas, {
+    first: state.tracks.a.analysis,
+    second: state.tracks.b.analysis,
+    active: state.active,
+    progress: state.progress,
+    view: state.settings.view
+  }, ui);
+}
+
+function errorMessage(error: unknown, ui: VoiceSpectrogramUI): string {
+  if (error instanceof Error && error.message === 'limit') return ui.limitError;
+  if (error instanceof Error && error.message === 'browser') return ui.browserError;
+  return ui.decodeError;
+}
+
+async function loadFile(context: ViewContext, key: TrackKey, file: File): Promise<void> {
+  context.state.tracks[key].state = 'decoding';
+  context.state.tracks[key].error = '';
+  render(context.root, context.canvas, context.state, context.ui);
+  try {
+    const audio = await decodeAudioFile(file);
+    context.state.tracks[key] = { ...audio, name: file.name, state: 'ready', analysis: analyzeSamples(audio.samples, audio.sampleRate, context.state.settings.ceilingHz), error: '' };
+  } catch (error) {
+    context.state.tracks[key].state = 'ready';
+    context.state.tracks[key].error = errorMessage(error, context.ui);
+  }
+  render(context.root, context.canvas, context.state, context.ui);
+}
+
+function bindFiles(root: HTMLElement, canvas: HTMLCanvasElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  const context = { root, canvas, state, ui };
+  root.querySelectorAll<HTMLInputElement>('[data-file]').forEach((input) => input.addEventListener('change', () => {
+    const file = input.files?.[0];
+    if (file) void loadFile(context, input.dataset.file as TrackKey, file);
+  }));
+  root.querySelectorAll<HTMLElement>('[data-drop]').forEach((zone) => {
+    zone.addEventListener('dragover', (event) => event.preventDefault());
+    zone.addEventListener('drop', (event) => {
+      event.preventDefault();
+      const file = event.dataTransfer?.files[0];
+      if (file) void loadFile(context, zone.dataset.drop as TrackKey, file);
+    });
+  });
+}
+
+function bindPresets(root: HTMLElement, canvas: HTMLCanvasElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-preset]').forEach((button) => button.addEventListener('click', () => {
+    const key = button.dataset.track as TrackKey;
+    const preset = button.dataset.preset as keyof typeof presets;
+    const name = preset === 'warm' ? ui.presetWarmLabel : ui.presetBrightLabel;
+    state.tracks[key] = presetTrack(preset, name, state.settings.ceilingHz);
+    render(root, canvas, state, ui);
+  }));
+}
+
+function bindSettings(root: HTMLElement, canvas: HTMLCanvasElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-ceiling]').forEach((button) => button.addEventListener('click', () => {
+    state.settings.ceilingHz = Number(button.dataset.ceiling);
+    Object.values(state.tracks).forEach((track) => track.analysis = analyzeSamples(track.samples, track.sampleRate, state.settings.ceilingHz));
+    saveSettings(state.settings);
+    render(root, canvas, state, ui);
+  }));
+  root.querySelectorAll<HTMLButtonElement>('[data-view]').forEach((button) => button.addEventListener('click', () => {
+    state.settings.view = button.dataset.view as SpectrogramSettings['view'];
+    saveSettings(state.settings);
+    render(root, canvas, state, ui);
+  }));
+}
+
+function bindPlayback(root: HTMLElement, canvas: HTMLCanvasElement, state: AppState, ui: VoiceSpectrogramUI): void {
+  const player = new AudioPlayer();
+  root.querySelectorAll<HTMLButtonElement>('[data-play]').forEach((button) => button.addEventListener('click', () => {
+    const key = button.dataset.play as TrackKey;
+    state.active = key;
+    state.progress = 0;
+    void player.play(state.tracks[key], {
+      progress: (progress) => { state.progress = progress; render(root, canvas, state, ui); },
+      ended: () => { state.active = null; state.progress = 0; render(root, canvas, state, ui); }
+    });
+  }));
+  requireElement<HTMLButtonElement>(root, '[data-stop]').addEventListener('click', () => {
+    player.stop();
+    state.active = null;
+    state.progress = 0;
+    render(root, canvas, state, ui);
+  });
+}
+
+export function mountVoiceSpectrogram(root: HTMLElement): void {
+  if (root.dataset.mounted === 'true') return;
+  root.dataset.mounted = 'true';
+  const ui = parseUI(root);
+  const canvas = requireElement<HTMLCanvasElement>(root, 'canvas');
+  const state = initialState(ui);
+  bindFiles(root, canvas, state, ui);
+  bindPresets(root, canvas, state, ui);
+  bindSettings(root, canvas, state, ui);
+  bindPlayback(root, canvas, state, ui);
+  new ResizeObserver(() => render(root, canvas, state, ui)).observe(canvas);
+  render(root, canvas, state, ui);
+}