@jjlmoya/utils-forensic-science 1.12.0 → 1.13.0

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

package/src/tool/voice-spectrogram-analyzer/i18n/de.ts

@@ -0,0 +1,135 @@
+import { bibliography } from '../bibliography';
+import type { VoiceSpectrogramLocaleContent } from '../entry';
+
+const slug = "stimmen-spektrogramm-analysator-online";
+const title = "Stimmen Spektrogramm Analysator Online";
+const description = "Visualisieren Sie Frequenz, Zeit, Intensität und Formanten von zwei Audiodateien lokal und privat in Ihrem Browser.";
+
+const howTo = [
+  {
+    "name": "Zwei Proben wählen",
+    "text": "Laden Sie lokale Audiodateien oder nutzen Sie die synthetischen Vokalstudien."
+  },
+  {
+    "name": "Frequenz-Obergrenze festlegen",
+    "text": "Wählen Sie 4, 6 oder 8 kHz passend zum Stimmumfang."
+  },
+  {
+    "name": "Spektralplatten ablesen",
+    "text": "Inspezieren Sie Zeit, Frequenz, Intensität und Formanten."
+  },
+  {
+    "name": "Anhören und vergleichen",
+    "text": "Spielen Sie die Proben ab und vergleichen Sie die Durchschnittswerte."
+  }
+];
+
+const faq = [
+  {
+    "question": "Was zeigt ein Spektrogramm der Stimme?",
+    "answer": "Ein Spektrogramm stellt Zeit auf der horizontalen Achse, Frequenz auf der vertikalen Achse und Signalintensität durch Helligkeit dar."
+  },
+  {
+    "question": "Werden meine Aufnahmen hochgeladen?",
+    "answer": "Nein. Alle Berechnungen erfolgen vollständig lokal im Browser."
+  },
+  {
+    "question": "Was bedeuten F1, F2 und F3?",
+    "answer": "Es sind Schätzungen der ersten drei Hauptresonanzen des Vokaltrakts."
+  },
+  {
+    "question": "Kann das Tool einen Sprecher identifizieren?",
+    "answer": "Nein. Visuelle Ähnlichkeiten ersetzen kein forensisches Gutachten."
+  },
+  {
+    "question": "Warum ändern sich die Formanten bei anderer Frequenzgrenze?",
+    "answer": "Die Wahl des Frequenzbereichs verändert die sichtbaren Resonanzspitzen."
+  }
+];
+
+export const content: VoiceSpectrogramLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    "privacyBadge": "Nur lokal",
+    "privacyNote": "Ihre Aufnahmen bleiben auf Ihrem Gerät. Analyse und Dekodierung laufen direkt im Browser.",
+    "loadHeading": "Zwei Audiodateien zum Vergleichen laden",
+    "sampleALabel": "Probe A",
+    "sampleBLabel": "Probe B",
+    "chooseFileLabel": "Audio auswählen",
+    "replaceFileLabel": "Audio ersetzen",
+    "dropHint": "Ziehen Sie eine Audiodatei hierher (max. 25 MB). Die ersten 20 Sekunden werden analysiert.",
+    "presetHint": "Starten Sie sofort mit den zwei synthetischen Vokalstudien.",
+    "presetWarmLabel": "Warme Vokalstudie",
+    "presetBrightLabel": "Helle Vokalstudie",
+    "emptySampleLabel": "Warten auf Audio",
+    "readySampleLabel": "Spektralplatte erstellt",
+    "decodingSampleLabel": "Spektralplatte wird berechnet",
+    "errorSampleLabel": "Probe konnte nicht analysiert werden",
+    "durationLabel": "Dauer",
+    "ceilingHeading": "Frequenz-Obergrenze",
+    "ceilingFourLabel": "4 kHz",
+    "ceilingSixLabel": "6 kHz",
+    "ceilingEightLabel": "8 kHz",
+    "stageLabel": "Spiegel-Spektrogramm-Bühne",
+    "mirrorViewLabel": "Gegenübergestellt",
+    "splitViewLabel": "Parallel",
+    "playALabel": "Probe A abspielen",
+    "playBLabel": "Probe B abspielen",
+    "stopLabel": "Stoppen",
+    "timeAxisLabel": "Zeit",
+    "frequencyAxisLabel": "Frequenz",
+    "intensityLegendLabel": "Hellere Tinte bedeutet höhere Energie",
+    "formantLegendLabel": "Geschätzte Formant-Linien",
+    "sampleAEmptyCanvasLabel": "Laden Sie Probe A für das Spektrogramm",
+    "sampleBEmptyCanvasLabel": "Laden Sie Probe B für das Spektrogramm",
+    "comparisonHeading": "Analyse der Resonanzmuster",
+    "comparisonNote": "Durchschnittliche Spektralspitzen in stimmhaften Abschnitten. Die Abweichungen sind Messwerte, kein Übereinstimmungsprozentsatz.",
+    "formantOneLabel": "Erste Resonanzregion (F1)",
+    "formantTwoLabel": "Zweite Resonanzregion (F2)",
+    "formantThreeLabel": "Dritte Resonanzregion (F3)",
+    "averageLabel": "Durchschnitt",
+    "differenceLabel": "Differenz",
+    "unavailableLabel": "Nicht verfügbar",
+    "statusEmptyLabel": "Laden Sie eine Probe zum Starten",
+    "statusSingleLabel": "Eine Spektralplatte ist bereit",
+    "statusReadyLabel": "Beide Spektralplatten sind bereit",
+    "limitError": "Die Datei überschreitet das lokale Limit von 25 MB.",
+    "decodeError": "Das Audioformat konnte vom Browser nicht dekodiert werden.",
+    "browserError": "Web Audio API ist in diesem Browser nicht verfügbar.",
+    "educationalNote": "Didaktisches Signalwerkzeug. Formantlinien dienen der Veranschaulichung und sind nicht für forensische Gutachten geeignet."
+},
+  seo: [
+    { type: 'title', text: "Wie ein Spektrogramm Schall in ein visuelles Bild verwandelt", level: 2 },
+    { type: 'paragraph', html: "Ein <strong>Stimmen-Spektrogramm</strong> verwandelt eine Aufnahme in eine Karte mit Zeit auf der horizontalen Achse und Frequenz auf der vertikalen Achse. Stärkere Energie erscheint als hellere Farbe. Dies macht anhaltende Vokale, Obereltöne, Stille und Resonanzen leichter erkennbar als in einer einfachen Wellenform. Die Visualisierung ermöglicht eine direkte und detaillierte Analyse von Sprachmustern im Frequenzbereich. Dadurch lassen sich akustische Merkmale präzise untersuchen." },
+    { type: 'paragraph', html: "Der Analysator unterteilt das Signal in kurze überlappende Abschnitte, wendet ein Hamming-Fenster an und berechnet die Energieverteilung über die Frequenzen mittels FFT. Ein kurzer Abschnitt bestimmt den genauen Zeitpunkt, während die Frequenzauflösung zeigt, wo sich die Energie konzentriert. Aufgrund der Unschärferelation der Signalverarbeitung gibt es immer einen Kompromiss zwischen Zeit- und Frequenzauflösung. Diese Eigenschaften bestimmen die visuelle Schärfe." },
+    { type: 'diagnostic', variant: 'info', title: "Private Verarbeitung im Browser", html: "Visualisieren Sie Frequenz, Zeit, Intensität und Formanten von zwei Audiodateien lokal und privat in Ihrem Browser." },
+    { type: 'stats', columns: 3, items: [
+      { value: "Zeit", label: "Von links nach rechts lesen" },
+      { value: "Hz", label: "Frequenzposition" },
+      { value: "Energie", label: "Als Helligkeit dargestellt" }
+    ] },
+    { type: 'title', text: "Formanten lesen ohne Ergebnisse zu übertreiben", level: 3 },
+    { type: 'paragraph', html: "Formanten sind Resonanzbereiche, die durch den Vokaltrakt geformt werden. F1 und F2 werden in der Phonetik verwendet, um die Vokalhöhe und den Artikulationsort zu beschreiben. Dieser Analysator verfolgt breite Spektralspitzen in drei Frequenzbereichen, damit Benutzer sichtbare Bänder mit dem Verhalten von F1, F2 und F3 verbinden können." },
+    { type: 'paragraph', html: "Eine professionelle Formantmessung nutzt normalerweise ein gewichtetes Linear Prediction Coding Verfahren und passt die Frequenzobergrenze an den Sprecher an. Grundtonharmonische, Nasalierung, Raumhall und Hintergrundgeräusche können einfache Schätzungen verschieben. Nutzen Sie diese Linien als didaktische Orientierung und prüfen Sie stets das visuelle Spektrum im Hintergrund." },
+    { type: 'table', headers: ['Guide', 'Region', 'Meaning'], rows: [["F1","180 bis 1000 Hz","Erste Resonanzregion, verbunden mit Vokalöffnung"],["F2","900 bis 3000 Hz","Zweite Resonanzregion, verbunden mit der Zungenposition"],["F3","2000 bis 4500 Hz","Höhere Resonanzregion, beeinflusst durch die Geometrie des Vokaltrakts"]] },
+    { type: 'title', text: "Warum Frequenzgrenzen das Bild verändern", level: 3 },
+    { type: 'comparative', columns: 2, items: [
+      { title: "Niedrige Grenze (4 kHz)", description: "Bessere Sicht auf untere Frequenzen", points: ["Nützlich für Vokale", "Kann hohe Energie ausschließen", "Garantiert keine höhere Genauigkeit"] },
+      { title: "Hohe Grenze (6/8 kHz)", description: "Mehr obere Details", highlight: true, points: ["Für helle Stimmen", "Zeigt Reibelaute", "Komprimiert untere Bänder"] }
+    ] },
+    { type: 'title', text: "Ein verantwortungsvoller Vergleich zweier Proben", level: 3 },
+    { type: 'paragraph', html: "Der Vergleich zweier Platten ist am nützlichsten, wenn die Aufnahmen denselben Vokal oder Satz unter ähnlichen akustischen Bedingungen enthalten. Die angezeigten Abweichungen sind absolute Differenzen zwischen Spektralspitzen. Sie stellen kein Übereinstimmungsprozent und keinen biometrischen Identitätsbeweis dar." },
+    { type: 'list', items: ["<strong>Gleichen Inhalt vergleichen:</strong> Wiederholte Vokale oder Wörter lassen sich leichter vergleichen als unterschiedliche Sätze.","<strong>Ähnliche Aufnahmebedingungen nutzen:</strong> Mikrofon und Raumakustik beeinflussen das Spektrum maßgeblich.","<strong>Mit dem Cursor zuhören:</strong> Verbinden Sie visuelle Ereignisse mit dem exakten Klangmoment.","<strong>Keine Identitätsansprüche stellen:</strong> Ein ähnlich aussehendes Spektrogramm beweist keine Sprecheridentität."] },
+    { type: 'summary', title: "Zusammenfassung des Analysators", items: ["Erstellen Sie ein Audiospektrogramm lokal aus dateibasierten Formaten.","Erkunden Sie zwei Proben in gespiegelten oder parallelen Platten.","Lernen Sie, wie sich spektrale Energie und Formantbereiche verändern.","Halten Sie Vergleiche beschreibend und didaktisch anstatt forensisch."] }
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [
+    { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'MultimediaApplication', operatingSystem: 'Any' },
+    { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) },
+    { '@context': 'https://schema.org', '@type': 'HowTo', name: title, step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })) }
+  ]
+};

package/src/tool/voice-spectrogram-analyzer/i18n/en.ts

@@ -0,0 +1,122 @@
+import { bibliography } from '../bibliography';
+import type { VoiceSpectrogramLocaleContent } from '../entry';
+
+const slug = 'voice-spectrogram-analyzer-online';
+const title = 'Voice Spectrogram Analyzer Online';
+const description = 'Reveal the frequency, time, intensity, and estimated formant patterns of two audio samples privately in your browser.';
+
+const howTo = [
+  { name: 'Choose Two Audio Samples', text: 'Load one or two local audio files, drag them onto the sample chambers, or begin with the included synthetic vowel studies.' },
+  { name: 'Set the Frequency Ceiling', text: 'Choose a 4, 6, or 8 kHz ceiling to frame the frequencies that matter for the material and voice range you are studying.' },
+  { name: 'Read the Spectral Plates', text: 'Inspect time from left to right, frequency vertically, intensity as brightness, and the three fine guides as educational formant peak estimates.' },
+  { name: 'Listen and Compare', text: 'Play either sample to move the synchronized cursor, then compare average F1, F2, and F3 estimates without treating the result as speaker identification.' }
+];
+
+const faq = [
+  { question: 'What does a voice spectrogram show?', answer: 'A spectrogram maps time horizontally, frequency vertically, and signal intensity through color brightness. Sustained speech resonances often appear as horizontal energy bands.' },
+  { question: 'Are my audio recordings uploaded?', answer: 'No. Audio decoding, spectral analysis, visualization, and playback happen locally in the browser. The tool does not send the selected files to a server.' },
+  { question: 'What are the F1, F2, and F3 guides?', answer: 'They are educational estimates of three broad spectral envelope peaks. F1 and F2 are commonly used to discuss vowel height and vowel place, while F3 can reflect additional vocal tract resonances.' },
+  { question: 'Can this analyzer identify a speaker?', answer: 'No. Visual resemblance or formant proximity cannot establish identity. Forensic voice comparison requires validated methods, suitable recordings, uncertainty assessment, and qualified expert interpretation.' },
+  { question: 'Why can formant estimates change with the ceiling?', answer: 'The selected frequency range changes which spectral peaks are available and how they are separated. Speaker anatomy, vowel, recording quality, pitch, and analysis settings also affect estimates.' }
+];
+
+export const content: VoiceSpectrogramLocaleContent = {
+  slug,
+  title,
+  description,
+  ui: {
+    privacyBadge: 'Local only',
+    privacyNote: 'Your recordings stay on this device. Decoding and analysis run inside the browser.',
+    loadHeading: 'Bring two sounds into the light',
+    sampleALabel: 'Sample A',
+    sampleBLabel: 'Sample B',
+    chooseFileLabel: 'Choose audio',
+    replaceFileLabel: 'Replace audio',
+    dropHint: 'Drop an audio file here, up to 25 MB. The first 20 seconds are analyzed.',
+    presetHint: 'Start instantly with the two synthetic vowel studies.',
+    presetWarmLabel: 'Warm vowel study',
+    presetBrightLabel: 'Bright vowel study',
+    emptySampleLabel: 'Waiting for audio',
+    readySampleLabel: 'Spectral plate revealed',
+    decodingSampleLabel: 'Developing the spectral plate',
+    errorSampleLabel: 'The sample could not be analyzed',
+    durationLabel: 'Duration',
+    ceilingHeading: 'Frequency ceiling',
+    ceilingFourLabel: '4 kHz',
+    ceilingSixLabel: '6 kHz',
+    ceilingEightLabel: '8 kHz',
+    stageLabel: 'Mirrored voice spectrogram stage',
+    mirrorViewLabel: 'Mirror plates',
+    splitViewLabel: 'Parallel plates',
+    playALabel: 'Play sample A',
+    playBLabel: 'Play sample B',
+    stopLabel: 'Stop',
+    timeAxisLabel: 'Time',
+    frequencyAxisLabel: 'Frequency',
+    intensityLegendLabel: 'Brighter ink means stronger energy',
+    formantLegendLabel: 'Estimated formant guides',
+    sampleAEmptyCanvasLabel: 'Load sample A to reveal its spectrum',
+    sampleBEmptyCanvasLabel: 'Load sample B to reveal its spectrum',
+    comparisonHeading: 'Read the resonant fingerprints',
+    comparisonNote: 'These values describe average spectral peak positions across voiced frames. Differences are measurements, not a similarity score or identity conclusion.',
+    formantOneLabel: 'First resonance region',
+    formantTwoLabel: 'Second resonance region',
+    formantThreeLabel: 'Third resonance region',
+    averageLabel: 'Average',
+    differenceLabel: 'Gap',
+    unavailableLabel: 'Not available',
+    statusEmptyLabel: 'Load a sample to begin',
+    statusSingleLabel: 'One plate is ready',
+    statusReadyLabel: 'Two spectral plates are ready',
+    limitError: 'This file is larger than the 25 MB local analysis limit.',
+    decodeError: 'This browser could not decode the selected audio format.',
+    browserError: 'Web Audio is unavailable in this browser.',
+    educationalNote: 'Educational signal visualization only. Formant guides use smoothed spectral peak regions, not a validated LPC workflow, and must not be used for speaker identification.'
+  },
+  seo: [
+    { type: 'title', text: 'How a Voice Spectrogram Turns Sound Into a Visible Landscape', level: 2 },
+    { type: 'paragraph', html: 'A <strong>voice spectrogram</strong> transforms a recording into a map with time on the horizontal axis and frequency on the vertical axis. Stronger energy appears as brighter color. This makes sustained vowels, harmonics, silence, noise, and changing resonances easier to explore than they are in a waveform alone.' },
+    { type: 'paragraph', html: 'The analyzer divides the signal into short overlapping frames, applies a Hamming window, and transforms each frame from amplitude over time into energy by frequency. A short frame preserves when a sound happened, while its frequency bins reveal where energy is concentrated. Because every spectrogram balances time resolution against frequency resolution, narrow transients and stable vowels can never both be represented with unlimited precision. The display should therefore be read as a measured view of the chosen settings, not as a perfect picture of the original pressure wave.' },
+    { type: 'diagnostic', variant: 'info', title: 'Private Browser Processing', html: 'The selected recording is decoded into an in-memory audio buffer and analyzed locally. No upload is needed, so private classroom recordings, rehearsals, and personal voice samples remain on the device.' },
+    { type: 'stats', columns: 3, items: [
+      { value: 'Time', label: 'Read from left to right' },
+      { value: 'Hz', label: 'Frequency position' },
+      { value: 'Energy', label: 'Shown as luminous intensity' }
+    ] },
+    { type: 'title', text: 'Reading Formants Without Overstating the Result', level: 3 },
+    { type: 'paragraph', html: 'Formants are resonant regions shaped by the vocal tract. F1 and F2 are often used in phonetics to discuss vowel height and place. This analyzer traces broad smoothed peaks in three frequency regions so beginners can connect visible bands with approximate F1, F2, and F3 behavior.' },
+    { type: 'paragraph', html: 'Professional formant measurement normally uses a carefully configured linear predictive coding workflow, checks the tracking by eye, and adapts the formant ceiling to the speaker and vowel. Pitch harmonics, nasalization, room reflections, lossy compression, background noise, and weak recording levels can all pull a simple peak estimate away from the vocal tract resonance of interest. The guides here intentionally expose broad regions and average values for learning. If a guide jumps between bands or conflicts with the visible spectrum, treat that disagreement as a reason to inspect the recording and settings rather than as hidden evidence.' },
+    { type: 'table', headers: ['Guide', 'Search region', 'Useful interpretation'], rows: [
+      ['F1', '180 to 1000 Hz', 'A broad first resonance region often associated with vowel openness'],
+      ['F2', '900 to 3000 Hz', 'A broad second resonance region often associated with front and back vowel position'],
+      ['F3', '2000 to 4500 Hz', 'A higher resonance region affected by vocal tract shape and articulation']
+    ] },
+    { type: 'title', text: 'Why Analysis Settings Change the Picture', level: 3 },
+    { type: 'comparative', columns: 2, items: [
+      { title: 'Lower Ceiling', description: 'A 4 kHz ceiling gives more visual space to lower speech frequencies.', points: ['Useful for a close look at lower resonances', 'May exclude higher energy', 'Does not guarantee more accurate formants'] },
+      { title: 'Higher Ceiling', description: 'A 6 or 8 kHz ceiling includes more upper spectrum detail.', highlight: true, points: ['Useful for brighter voices and broadband sounds', 'Shows frication and upper harmonics', 'Compresses lower bands vertically'] }
+    ] },
+    { type: 'title', text: 'A Responsible Two Sample Comparison', level: 3 },
+    { type: 'paragraph', html: 'Comparing two plates is most useful when the recordings contain the same vowel, word, or short phrase and were made with similar microphones and environments. The displayed gaps are absolute differences between average peak positions. They do not model within speaker variability, between speaker variability, channel mismatch, speaking style, health, age, or the probability of competing explanations. For that reason the analyzer never converts a gap into a match percentage, identity badge, or forensic conclusion.' },
+    { type: 'list', items: [
+      '<strong>Match the spoken material:</strong> repeated vowels or words are easier to compare than unrelated phrases.',
+      '<strong>Use similar recording conditions:</strong> microphones, compression, background noise, and distance can alter the spectrum.',
+      '<strong>Listen with the cursor:</strong> connect a visible event to the exact moment that produced it.',
+      '<strong>Avoid identity claims:</strong> a similar looking spectrogram does not prove that two recordings share a speaker.'
+    ] },
+    { type: 'summary', title: 'What This Analyzer Is For', items: [
+      'Generate an audio spectrogram locally from common browser decodable files.',
+      'Explore two samples in mirrored or parallel plates with synchronized playback.',
+      'Learn how spectral energy and approximate formant regions change across a recording.',
+      'Keep comparison descriptive and educational rather than forensic or biometric.'
+    ] }
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [
+    { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'MultimediaApplication', operatingSystem: 'Any' },
+    { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) },
+    { '@context': 'https://schema.org', '@type': 'HowTo', name: title, step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })) }
+  ]
+};