clover-iiif-audiomotion-display

A Clover IIIF custom display plugin that renders an AudioMotion Analyzer visualizer for audio resources. Pass it to the customDisplays prop of <Viewer> to replace the default audio player with a frequency spectrum visualization.

Installation

npm install clover-iiif-audiomotion-display

Peer dependencies

npm install @samvera/clover-iiif audiomotion-analyzer react react-dom

Usage

Build a customDisplays entry targeting audio/mpeg (or any other audio format) and pass it to Clover IIIF's <Viewer>:

import AudioMotionDisplay from "clover-iiif-audiomotion-display";
import { Viewer } from "@samvera/clover-iiif";

// Any AudioMotion constructor options can be passed as componentProps
const displayProps = {
  ledBars: true,
  mode: 10,
  showPeaks: false,
  fillAlpha: 0,
  lineWidth: 2,
  minFreq: 20,
  maxFreq: 12000,
  reflexAlpha: 1,
  reflexRatio: 0.5,
};

const customDisplays = [
  {
    display: {
      component: AudioMotionDisplay,
      componentProps: displayProps,
    },
    target: {
      paintingFormat: ["audio/mpeg"],
    },
  },
];

<Viewer
  iiifContent="https://example.com/collection.json"
  customDisplays={customDisplays}
/>

Props

The component accepts all props required by the Clover IIIF custom display interface, plus any AudioMotionAnalyzer constructor options as additional props.

| Prop | Type | Required | Description | |------------------|----------------------------------|----------|---------------------------------------------------| | id | string | Yes | Unique identifier for the display instance | | annotationBody | LabeledIIIFExternalWebResource | Yes | The IIIF annotation body; annotationBody.id is used as the audio src | | hooks | { useViewerState, useViewerDispatch } | Yes | Clover IIIF viewer hooks | | ...rest | Partial<ConstructorOptions> | No | Any AudioMotion options |

Defaults

The following AudioMotion options are applied by default and can be overridden via props:

| Option | Default | |--------------|---------| | showScaleX | false | | showScaleY | false |

How it works

On mount the component:

1. Creates an AudioMotionAnalyzer instance attached to the #audio-motion-display div, using the <audio> element as its source.
2. Calls dispatch({ type: "updateActivePlayer", player: <audio> }) so Clover IIIF's viewer state tracks the active player.

On play, the component resumes the Web Audio context (required in browsers that suspend it until a user gesture).

Development

npm install
npm test          # run tests once
npm run test:watch  # run tests in watch mode
npm run build     # compile to dist/

License

MIT