DEMO · WEB COMPONENT

An Audio Item That Was Never IIIF

Unlocking the Airwaves reunites the scattered recordings of the National Association of Educational Broadcasters. It is a plain site: each program is an <audio> tag and a caption <track>, two files on S3. There is no IIIF manifest, no API, nothing this player was built to consume.

This page plays one of its programs anyway — American language: Americans as makers of words, a 1954 talk by Mitford M. Mathews, editor of the Dictionary of Americanisms, on how Americans coin new words. Between the two S3 files and the player, this page adds one thing: a small IIIF manifest.

This is the inverse of the Avalon demo. There, a repository publishes a complete manifest and the element uses it unchanged. Here, no IIIF exists at the source and this page authors the manifest. That is the more common case: most audiovisual pages on the web have media and captions but no manifest. Every host-page block below is the code this page actually runs.

What the source publishes

1 — Two files on S3, wired to a bare `<audio>`

View source on the episode page and this is the whole media layer — an MP3 and a WebVTT caption file, both served from an Amazon S3 bucket with Access-Control-Allow-Origin: * and byte-range support:

<audio controls crossorigin="anonymous"
       src="https://mith-uta.s3.amazonaws.com/data/audio/cpb-aacip-500-1c1tjk8d.mp3">
  <track default kind="captions" srclang="en"
         src="https://mith-uta.s3.amazonaws.com/data/transcripts/…/cpb-aacip-500-1c1tjk8d.vtt">
</audio>

That is enough to play and to caption, but not to navigate: the transcript is only inside the <track> — not shown as text, not searchable, with no way to click a line and seek. A IIIF manifest makes the same cues addressable, so the player can list, search, and seek to them.

What this page authors

2 — A minimal IIIF manifest around those two URLs

One canvas, its duration the length of the audio. The MP3 is a painting annotation — a Sound body. The VTT is a supplementing annotation with body type Text and format text/vtt (IIIF Cookbook recipe 0219). Nothing is copied out of the VTT — the manifest only points at it; the player fetches and parses it. This is the file served at /iiif-timed-transcript/fixtures/airwaves.json, shown verbatim:

{
  "@context": "http://iiif.io/api/presentation/3/context.json",
  "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json",
  "type": "Manifest",
  "label": {
    "en": [
      "American language: Americans as makers of words"
    ]
  },
  "summary": {
    "en": [
      "Mitford M. Mathews, editor of the Dictionary of Americanisms, on how Americans coined new words. The opening program of the NAEB series \"American language\" (University of Chicago, 1954). Audio and transcript from Unlocking the Airwaves; item cpb-aacip-500-1c1tjk8d."
    ]
  },
  "requiredStatement": {
    "label": {
      "en": [
        "Source"
      ]
    },
    "value": {
      "en": [
        "Audio and auto-generated transcript from Unlocking the Airwaves (unlockingtheairwaves.org), a project of the Maryland Institute for Technology in the Humanities drawing on the American Archive of Public Broadcasting. Transcript produced by Pop Up Archive; uncorrected. This IIIF manifest was authored for the iiif-timed-transcript demo — Unlocking the Airwaves does not itself publish IIIF."
      ]
    }
  },
  "items": [
    {
      "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1",
      "type": "Canvas",
      "duration": 830.467,
      "items": [
        {
          "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1/page/1",
          "type": "AnnotationPage",
          "items": [
            {
              "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1/annotation/audio",
              "type": "Annotation",
              "motivation": "painting",
              "body": {
                "id": "https://mith-uta.s3.amazonaws.com/data/audio/cpb-aacip-500-1c1tjk8d.mp3",
                "type": "Sound",
                "format": "audio/mpeg",
                "duration": 830.467
              },
              "target": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1"
            }
          ]
        }
      ],
      "annotations": [
        {
          "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1/annotations/1",
          "type": "AnnotationPage",
          "items": [
            {
              "id": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1/annotation/transcript",
              "type": "Annotation",
              "motivation": "supplementing",
              "body": {
                "id": "https://mith-uta.s3.amazonaws.com/data/transcripts/cpb-aacip-500-1c1tjk8d/cpb-aacip-500-1c1tjk8d.vtt",
                "type": "Text",
                "format": "text/vtt",
                "language": "en",
                "label": {
                  "en": [
                    "English captions"
                  ]
                }
              },
              "target": "https://umd-mith.github.io/iiif-timed-transcript/fixtures/airwaves.json/canvas/1"
            }
          ]
        }
      ]
    }
  ]
}

The ids are the URL where this manifest is actually served — this is an authored artifact, not something Unlocking the Airwaves publishes, and the requiredStatement says so. At build time this page validates the JSON against the library's ManifestSchema; a malformed manifest fails the build rather than reaching a browser.

3 — The markup: one element

<iiif-transcript-player
  id="player"
  manifest-url="/iiif-timed-transcript/fixtures/airwaves.json"
  label="American language: Americans as makers of words (NAEB, 1954)"
  crossorigin="anonymous"
></iiif-transcript-player>

Audio-only, so the element renders no video frame — just the control bar and the transcript panel. crossorigin="anonymous" puts the media element in CORS mode so the transcript's caption track loads from the S3 bucket (a cross-origin text track needs it). The transcript switch, annotations = "auto", is set as a property in the script below.

4 — Register the element and turn on the auto transcript

import { register } from "@umd-mith/iiif-timed-transcript/element";
register(); // defines <iiif-transcript-player>

const el = document.getElementById("player");

// property, not attribute: build the transcript from the manifest's
// supplementing VTT track — no VTT parsing in this page
el.annotations = "auto";

With annotations = "auto" the element finds no embedded text annotations, falls back to the canvas's supplementing VTT track, fetches it, reduces each cue to plain text, and builds the click-to-seek, searchable transcript. The event log beside the live player records each event the element emits.