feat: Audio annotator.

[mturoci]

Demo

Screen.Recording.2022-11-18.at.9.07.51.AM.mov

Proposed API

/** Create a unique tag type for use in an audio annotator. */
interface AudioAnnotatorTag {
  /** An identifying name for this tag. */
  name: Id
  /** Text to be displayed for the annotation. */
  label: S
  /** Hex or RGB color string to be used as the background color. */
  color: S
}

/** Create an annotator item with initial selected tags or no tags. */
interface AudioAnnotatorItem {
  /** The start of the audio annotation in seconds. */
  start: F
  /** The end of the audio annotation in seconds. */
  end: F
  /** The `name` of the audio annotator tag to refer to for the `label` and `color` of this item. */
  tag: S
}

/**
 * Create an audio annotator component.
 * 
 * This component allows annotating and labeling parts of audio file.
 */
export interface AudioAnnotator {
  /** An identifying name for this component. */
  name: Id
  /** The source of the audio. We advise using mp3 or wav formats to achieve the best cross-browser experience. See https://caniuse.com/?search=audio%20format for other formats. */
  src: S
  /** The master list of tags that can be used for annotations. */
  tags: AudioAnnotatorTag[]
  /** Annotations to display on the image, if any. */
  items?: AudioAnnotatorItem[]
  /** True if the form should be submitted as soon as an annotation is made. */
  trigger?: B
}

Needs discussion

• Sent for feedback to people working with audio.
• The current implementation is not suitable for longer audio files as the annotations would be too close to each other and become unreadable. The obvious solution is a zoom on scroll feature. However, I am not very happy about zoom UX which would require Zooming in => annotating => Zooming out => Zooming in => annotating. A better UX IMO is to only support shorter audio files which would force app devs to chunk the audio themselves and provide a simple "pagination" UX which would only require annotating => hit next => annotating => hit next. These are however just my assumptions and would like to hear industry standard on this.

Closes #1601