Regions of interest example plugin

Spectastiq can be extended to allow tagging and highlighting regions of interest.

<script src="/path/to/spectastiq.js"></script>
<spectastiq-viewer
  src="/path/to/audio/my-audio.mp3"
  id="spectastiq"
>
</spectastiq-viewer>
<script type="module">
  import roiExtensionExample from "../roi-extension-example.js";

  const rois = [
    {
      minFreqHz: 690,
      maxFreqHz: 3810,
      start: 88.62,
      end: 91.36,
      label: "bellbird"
    },
    // ... more regions of interest
  ];
  window.addEventListener("load", () => {
    const spectastiq = document.getElementById("spectastiq");
    roiExtensionExample(spectastiq, rois);
  });
</script>

Creating regions with custom UI

This example adds basic buttons to allow creating and resizing regions.

<script src="/path/to/spectastiq.js"></script>
<spectastiq-viewer
  src="/path/to/audio/my-audio.mp3"
  id="spectastiq"
>
  <div slot="player-controls">
    <button class="play-pause">Play/pause</button>
    <button class="create-roi">Create ROI</button>
    <button class="resize-roi">Resize</button>
  </div>
</spectastiq-viewer>
<script type="module">
  import roiExtensionExample from "../roi-extension-example.js";
  const rois = [];
  window.addEventListener("load", () => {
    const spectastiq = document.getElementById("spectastiq");
    roiExtensionExample(spectastiq, rois);
  });
</script>