Add a checkbox to toggle spectrogram to just vocal range

Author: Matthew Klein

Diff for: src/components/SpectrogramGraph.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref, watch } from "vue";
 import { WaveSurfer, type WaveSurferOptions } from "wavesurfer.js";
-import { SpectrogramPlugin } from "wavesurfer.js/dist/plugins/spectrogram";
+import {
+  SpectrogramPlugin,
+  type SpectrogramPluginOptions,
+} from "wavesurfer.js/dist/plugins/spectrogram";
 
 import { useColorMap } from "@/use/colorMap";
 
 const props = defineProps<{
   src: string;
+  vocalRange?: boolean;
 }>();
 
 const { colors } = useColorMap();
@@ -29,6 +33,21 @@ const getOptions = (): WaveSurferOptions => {
   // const freq = 2 ** 14;
   // const freq = 2 ** 15;
 
+  const spectrogramOptions: SpectrogramPluginOptions = {
+    container: spectrogramBox.value,
+    windowFunc: "hann",
+    fftSamples: freq,
+    colorMap: colors,
+    labels: true,
+    // noverlap: (2 ** 13) * 0.875,
+    // noverlap: freq * 0.875,
+  };
+
+  if (props.vocalRange) {
+    spectrogramOptions.frequencyMin = 40;
+    spectrogramOptions.frequencyMax = 1.5 * 1000;
+  }
+
   return {
     container: waveBox.value,
     url: props.src,
@@ -40,31 +59,27 @@ const getOptions = (): WaveSurferOptions => {
     // minPxPerSec: 100,
     interact: false,
 
-    plugins: [
-      SpectrogramPlugin.create({
-        container: spectrogramBox.value,
-        windowFunc: "hann",
-        fftSamples: freq,
-        colorMap: colors,
-        labels: true,
-        frequencyMin: 40,
-        frequencyMax: 1.5 * 1000,
-        // noverlap: (2 ** 13) * 0.875,
-        // noverlap: freq * 0.875,
-      }),
-    ],
+    plugins: [SpectrogramPlugin.create(spectrogramOptions)],
   };
 };
 
-onMounted(async () => {
-  await nextTick();
+const setupWaveSurfer = () => {
   if (!waveBox.value) {
     throw new Error("missing wave surfer refs");
   }
 
+  if (wave.value) {
+    wave.value.destroy();
+  }
+
   wave.value = WaveSurfer.create(getOptions());
   wave.value.getMediaElement().controls = true;
-  audioBox.value?.append(wave.value.getMediaElement());
+  audioBox.value?.replaceChildren(wave.value.getMediaElement());
+};
+
+onMounted(async () => {
+  await nextTick();
+  setupWaveSurfer();
 });
 
 watch(
@@ -91,6 +106,11 @@ watch(
     }
   },
 );
+
+watch(
+  () => props.vocalRange,
+  () => setupWaveSurfer(),
+);
 </script>
 
 <template>

Diff for: src/views/SpectrogramExperiment.vue

@@ -8,15 +8,25 @@ import { toColor, useColorMap } from "@/use/colorMap";
 const { colors } = useColorMap();
 
 const audioSource = ref<string>();
+const vocalRange = ref(false);
 </script>
 
 <template>
   <div class="spectrogram-experiment">
     <AudioPicker v-model="audioSource" />
 
+    <div class="options">
+      <label for="vocal-range">Limit to vocal range</label>
+      <input id="vocal-range" v-model="vocalRange" type="checkbox" />
+    </div>
+
     <div class="spectrogram-wrapper">
       <template v-if="audioSource">
-        <SpectrogramGraph :src="audioSource" class="spectrogram" />
+        <SpectrogramGraph
+          :src="audioSource"
+          :vocal-range="vocalRange"
+          class="spectrogram"
+        />
       </template>
     </div>
   </div>