@jjlmoya/utils-forensic-science 1.12.0 → 1.14.0

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);
+}

package/src/tool/voice-spectrogram-analyzer/dom-views.ts

@@ -0,0 +1,204 @@
+import type { SpectrogramAnalysis } from './logic';
+import type { SpectrogramView } from './storage';
+import type { VoiceSpectrogramUI } from './ui';
+
+export interface SpectrogramScene {
+  first: SpectrogramAnalysis | null;
+  second: SpectrogramAnalysis | null;
+  active: 'a' | 'b' | null;
+  progress: number;
+  view: SpectrogramView;
+}
+
+interface Palette {
+  background: string;
+  grid: string;
+  text: string;
+  first: [number, number, number];
+  second: [number, number, number];
+  firstLine: string;
+  secondLine: string;
+  cursor: string;
+}
+
+interface CanvasLayout {
+  width: number;
+  height: number;
+}
+
+interface FormantStyle {
+  color: string;
+  flipped: boolean;
+}
+
+const plateCache = new WeakMap<SpectrogramAnalysis, { color: string; plate: HTMLCanvasElement }>();
+
+function parseHex(value: string): [number, number, number] {
+  const normalized = value.trim().replace('#', '');
+  const full = normalized.length === 3 ? normalized.split('').map((part) => part + part).join('') : normalized;
+  return [0, 2, 4].map((offset) => Number.parseInt(full.slice(offset, offset + 2), 16)) as [number, number, number];
+}
+
+function readPalette(root: HTMLElement): Palette {
+  const style = getComputedStyle(root);
+  const value = (name: string): string => style.getPropertyValue(name).trim();
+  return {
+    background: value('--n-va-canvas'),
+    grid: value('--n-va-grid'),
+    text: value('--n-va-muted'),
+    first: parseHex(value('--n-va-a')),
+    second: parseHex(value('--n-va-b')),
+    firstLine: value('--n-va-a-line'),
+    secondLine: value('--n-va-b-line'),
+    cursor: value('--n-va-cursor')
+  };
+}
+
+function buildPlate(analysis: SpectrogramAnalysis, color: [number, number, number]): HTMLCanvasElement {
+  const plate = document.createElement('canvas');
+  plate.width = analysis.frames.length;
+  plate.height = analysis.frames[0]?.energy.length ?? 1;
+  const context = plate.getContext('2d');
+  if (!context) return plate;
+  const image = context.createImageData(plate.width, plate.height);
+  analysis.frames.forEach((frame, x) => frame.energy.forEach((energy, bin) => {
+    const row = plate.height - 1 - bin;
+    const offset = ((row * plate.width) + x) * 4;
+    image.data[offset] = color[0];
+    image.data[offset + 1] = color[1];
+    image.data[offset + 2] = color[2];
+    image.data[offset + 3] = Math.round(255 * Math.pow(energy, 1.25));
+  }));
+  context.putImageData(image, 0, 0);
+  return plate;
+}
+
+function cachedPlate(analysis: SpectrogramAnalysis, color: [number, number, number]): HTMLCanvasElement {
+  const colorKey = color.join(',');
+  const cached = plateCache.get(analysis);
+  if (cached?.color === colorKey) return cached.plate;
+  const plate = buildPlate(analysis, color);
+  plateCache.set(analysis, { color: colorKey, plate });
+  return plate;
+}
+
+function drawPlate(context: CanvasRenderingContext2D, plate: HTMLCanvasElement, rect: DOMRect, flipped: boolean): void {
+  context.save();
+  if (flipped) {
+    context.translate(0, (2 * rect.y) + rect.height);
+    context.scale(1, -1);
+  }
+  context.drawImage(plate, rect.x, rect.y, rect.width, rect.height);
+  context.restore();
+}
+
+function frequencyY(frequency: number, analysis: SpectrogramAnalysis, rect: DOMRect, flipped: boolean): number {
+  const ratio = Math.min(1, frequency / analysis.ceilingHz);
+  return flipped ? rect.y + (ratio * rect.height) : rect.y + rect.height - (ratio * rect.height);
+}
+
+function drawFormants(context: CanvasRenderingContext2D, analysis: SpectrogramAnalysis, rect: DOMRect, style: FormantStyle): void {
+  context.save();
+  context.strokeStyle = style.color;
+  context.lineWidth = 1.5;
+  context.globalAlpha = 0.86;
+  for (let formant = 0; formant < 3; formant += 1) {
+    context.beginPath();
+    let drawing = false;
+    analysis.frames.forEach((frame, index) => {
+      const frequency = frame.formants?.[formant];
+      if (!frequency) {
+        drawing = false;
+        return;
+      }
+      const x = rect.x + ((index / Math.max(1, analysis.frames.length - 1)) * rect.width);
+      const y = frequencyY(frequency, analysis, rect, style.flipped);
+      if (drawing) context.lineTo(x, y);
+      else context.moveTo(x, y);
+      drawing = true;
+    });
+    context.stroke();
+  }
+  context.restore();
+}
+
+function drawGrid(context: CanvasRenderingContext2D, width: number, height: number, palette: Palette): void {
+  context.strokeStyle = palette.grid;
+  context.lineWidth = 1;
+  for (let index = 1; index < 8; index += 1) {
+    const x = 58 + (((width - 82) / 8) * index);
+    context.beginPath();
+    context.moveTo(x, 24);
+    context.lineTo(x, height - 30);
+    context.stroke();
+  }
+  context.beginPath();
+  context.moveTo(58, height / 2);
+  context.lineTo(width - 24, height / 2);
+  context.stroke();
+}
+
+function plateRects(width: number, height: number): [DOMRect, DOMRect] {
+  const x = 58;
+  const plotWidth = width - 82;
+  const halfHeight = (height - 54) / 2;
+  return [new DOMRect(x, 24, plotWidth, halfHeight), new DOMRect(x, 24 + halfHeight, plotWidth, halfHeight)];
+}
+
+function drawLabels(context: CanvasRenderingContext2D, layout: CanvasLayout, ui: VoiceSpectrogramUI, palette: Palette): void {
+  context.fillStyle = palette.text;
+  context.font = '12px sans-serif';
+  context.fillText(ui.sampleALabel, 12, 42);
+  context.fillText(ui.sampleBLabel, 12, layout.height - 38);
+  context.textAlign = 'center';
+  context.fillText(ui.timeAxisLabel, layout.width / 2, layout.height - 8);
+  context.save();
+  context.translate(14, layout.height / 2);
+  context.rotate(-Math.PI / 2);
+  context.fillText(ui.frequencyAxisLabel, 0, 0);
+  context.restore();
+  context.textAlign = 'left';
+}
+
+function drawCursor(context: CanvasRenderingContext2D, scene: SpectrogramScene, layout: CanvasLayout, palette: Palette): void {
+  if (!scene.active) return;
+  const x = 58 + ((layout.width - 82) * scene.progress);
+  context.strokeStyle = palette.cursor;
+  context.lineWidth = 2;
+  context.beginPath();
+  context.moveTo(x, 20);
+  context.lineTo(x, layout.height - 28);
+  context.stroke();
+  context.fillStyle = palette.cursor;
+  context.beginPath();
+  context.arc(x, layout.height / 2, 4, 0, Math.PI * 2);
+  context.fill();
+}
+
+export function renderSpectrogram(root: HTMLElement, canvas: HTMLCanvasElement, scene: SpectrogramScene, ui: VoiceSpectrogramUI): void {
+  const ratio = Math.min(2, window.devicePixelRatio || 1);
+  const width = Math.max(320, canvas.clientWidth);
+  const height = Math.max(360, canvas.clientHeight);
+  const layout = { width, height };
+  canvas.width = Math.round(width * ratio);
+  canvas.height = Math.round(height * ratio);
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  context.scale(ratio, ratio);
+  const palette = readPalette(root);
+  context.fillStyle = palette.background;
+  context.fillRect(0, 0, width, height);
+  drawGrid(context, width, height, palette);
+  const [firstRect, secondRect] = plateRects(width, height);
+  const secondFlipped = scene.view === 'mirror';
+  if (scene.first) {
+    drawPlate(context, cachedPlate(scene.first, palette.first), firstRect, false);
+    drawFormants(context, scene.first, firstRect, { color: palette.firstLine, flipped: false });
+  }
+  if (scene.second) {
+    drawPlate(context, cachedPlate(scene.second, palette.second), secondRect, secondFlipped);
+    drawFormants(context, scene.second, secondRect, { color: palette.secondLine, flipped: secondFlipped });
+  }
+  drawLabels(context, layout, ui, palette);
+  drawCursor(context, scene, layout, palette);
+}

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

@@ -0,0 +1,31 @@
+import type { ScienceToolEntry, ToolLocaleContent } from '../../types';
+import type { VoiceSpectrogramUI } from './ui';
+
+export type { VoiceSpectrogramUI } from './ui';
+
+export type VoiceSpectrogramLocaleContent = ToolLocaleContent<VoiceSpectrogramUI>;
+
+export const voiceSpectrogramAnalyzer: ScienceToolEntry<VoiceSpectrogramUI> = {
+  id: 'voice-spectrogram-analyzer',
+  icons: {
+    bg: 'mdi:waveform',
+    fg: 'mdi:microphone-outline'
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content)
+  }
+};

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

@@ -0,0 +1,13 @@
+export type SampleState = 'empty' | 'decoding' | 'ready' | 'error';
+
+export interface StageEvaluation {
+  key: 'empty' | 'single' | 'ready';
+  loadedCount: number;
+}
+
+export function evaluateStage(first: SampleState, second: SampleState): StageEvaluation {
+  const loadedCount = [first, second].filter((state) => state === 'ready').length;
+  if (loadedCount === 0) return { key: 'empty', loadedCount };
+  if (loadedCount === 1) return { key: 'single', loadedCount };
+  return { key: 'ready', loadedCount };
+}

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

@@ -0,0 +1,64 @@
+export function createHammingWindow(size: number): Float32Array {
+  const window = new Float32Array(size);
+  const denominator = Math.max(1, size - 1);
+  for (let index = 0; index < size; index += 1) {
+    window[index] = 0.54 - (0.46 * Math.cos((2 * Math.PI * index) / denominator));
+  }
+  return window;
+}
+
+function reverseBits(value: number, bits: number): number {
+  let reversed = 0;
+  let current = value;
+  for (let index = 0; index < bits; index += 1) {
+    reversed = (reversed << 1) | (current & 1);
+    current >>= 1;
+  }
+  return reversed;
+}
+
+function reorder(real: Float64Array, imaginary: Float64Array): void {
+  const bits = Math.log2(real.length);
+  for (let index = 0; index < real.length; index += 1) {
+    const target = reverseBits(index, bits);
+    if (target <= index) continue;
+    [real[index], real[target]] = [real[target]!, real[index]!];
+    [imaginary[index], imaginary[target]] = [imaginary[target]!, imaginary[index]!];
+  }
+}
+
+function transformStage(real: Float64Array, imaginary: Float64Array, size: number): void {
+  const half = size / 2;
+  const angleStep = (-2 * Math.PI) / size;
+  for (let start = 0; start < real.length; start += size) {
+    for (let offset = 0; offset < half; offset += 1) {
+      const angle = angleStep * offset;
+      const cosine = Math.cos(angle);
+      const sine = Math.sin(angle);
+      const upper = start + offset;
+      const lower = upper + half;
+      const upperReal = real[upper]!;
+      const upperImaginary = imaginary[upper]!;
+      const lowerReal = real[lower]!;
+      const lowerImaginary = imaginary[lower]!;
+      const realPart = (lowerReal * cosine) - (lowerImaginary * sine);
+      const imaginaryPart = (lowerReal * sine) + (lowerImaginary * cosine);
+      real[lower] = upperReal - realPart;
+      imaginary[lower] = upperImaginary - imaginaryPart;
+      real[upper] = upperReal + realPart;
+      imaginary[upper] = upperImaginary + imaginaryPart;
+    }
+  }
+}
+
+export function fftMagnitudes(input: Float32Array): Float64Array {
+  const real = Float64Array.from(input);
+  const imaginary = new Float64Array(input.length);
+  reorder(real, imaginary);
+  for (let size = 2; size <= input.length; size *= 2) transformStage(real, imaginary, size);
+  const magnitudes = new Float64Array(input.length / 2);
+  for (let index = 0; index < magnitudes.length; index += 1) {
+    magnitudes[index] = Math.hypot(real[index]!, imaginary[index]!) / input.length;
+  }
+  return magnitudes;
+}