This demo shows the player handling a real-world
AVAnnotate
manifest published in
Voices: Micro-editions of Readings by McClure, Marlatt, Rukeyser, eds. Tanya Clement et al., in Scholarly Editing,
vol. 43, 2026. Transcript annotations live in canvas.annotations rather than canvas.items.
The manifest uses motivation: ["commenting", "tagging"] with multi-body annotations — text content plus speaker and voice tags
separated by W3C purpose field. The buildTranscriptAnnotations() function extracts these into the player's Annotation[] format automatically.
import { ManifestSchema, getFirstCanvas, buildTranscriptAnnotations } from '@umd-mith/iiif-timed-transcript';
// 1. Fetch and validate the IIIF manifest
const manifest = await fetch(manifestUrl).then(r => r.json());
const { data } = ManifestSchema.safeParse(manifest);
// 2. Extract transcript annotations from canvas.annotations
const canvas = getFirstCanvas(data);
const { annotations, skipped } = buildTranscriptAnnotations(canvas);
// → annotations[] with text, timing, and metadata.tags
// → skipped[] with reasons for any annotations that couldn't be placed on the timeline
// 3. Pass to the player — works identically to VTT-sourced annotations
<IIIFPlayer.Transcript {annotations}>
<IIIFPlayer.TranscriptSearch />
<IIIFPlayer.TranscriptSegments />
</IIIFPlayer.Transcript>A poetry reading at Sir George Williams University, annotated via AVAnnotate Voices. 59 annotations with speaker identification and voice characterization tags.
Loading manifest and annotations...