wavesurfer-annotations

A wavesurfer.js plugin that shows the annotations of a recording. Each annotation's span of time is a region on the waveform; one bounded in frequency as well is also a box on the spectrogram.

Annotations of animal sounds, such as those made in Raven or on xeno-canto, usually bound a call in frequency as well as in time. The plugin draws them as boxes on wavesurfer.js's Spectrogram plugin, linked to regions on the waveform, and takes them as they are, in Audiovisual Core terms or plain ones.

See the demo

xeno-canto recordings and their annotations, from the audioBLAST! API, in wavesurfer.js 7 or 8.

Use it

With a script tag, after wavesurfer.js's own and its plugins':

<script src="https://cdn.audioblast.org/wavesurfer/8.0.2/wavesurfer.min.js"></script>
<script src="https://cdn.audioblast.org/wavesurfer/8.0.2/plugins/regions.min.js"></script>
<script src="https://cdn.audioblast.org/wavesurfer/8.0.2/plugins/spectrogram.min.js"></script>
<script src="https://cdn.audioblast.org/wavesurfer-annotations/0.1.0/annotations.min.js"></script>

const regions = WaveSurfer.Regions.create()
const spectrogram = WaveSurfer.Spectrogram.create({ scale: 'linear', height: 200 })
const annotations = WaveSurfer.Annotations.create({ regions, spectrogram })

WaveSurfer.create({
  container: '#player',
  url: 'rec1.wav',
  sampleRate: 48000, // the recording's own, so that the spectrogram reaches its top
  plugins: [regions, spectrogram, annotations],
})

annotations.addAll([
  { id: 'a1', start: 1.2, end: 1.9, low: 2400, high: 7800, label: 'Song' },
  { id: 'a2', start: 3.0, end: 3.4, low: 9000, label: 'Call, from 9 kHz up' },
  { id: 'a3', start: 5.1, end: 6.0, label: 'Noise, all frequencies' },
])

It works with wavesurfer.js 7.10 and 8. Its options, events and styling are in the README, and its source and issues on GitHub. MIT licence.