Merge pull request #60 from kashiken/bugfix-spectrogram-selection

Bugfix spectrogram selection
sukumo28 · Jun 20, 2024 · 056a350 · 056a350
2 parents cddd740 + af7d5c9
commit 056a350
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 17 deletions.
diff --git a/src/webview/components/figureInteraction/figureInteractionComponent.ts b/src/webview/components/figureInteraction/figureInteractionComponent.ts
@@ -4,6 +4,7 @@ import PlayerService from "../../services/playerService";
 import AnalyzeService from "../../services/analyzeService";
 import AnalyzeSettingsService, {
   AnalyzeSettingsProps,
+  FrequencyScale,
 } from "../../services/analyzeSettingsService";
 import Component from "../../component";
 
@@ -310,11 +311,40 @@ export default class FigureInteractionComponent extends Component {
         analyseSettingsService.maxAmplitude = maxAmplitude;
       } else {
         // SpectrogramCanvas
-        const frequencyRange = settings.maxFrequency - settings.minFrequency;
-        const minFrequency =
-          (1 - maxY / rect.height) * frequencyRange + settings.minFrequency;
-        const maxFrequency =
-          (1 - minY / rect.height) * frequencyRange + settings.minFrequency;
+        let minFrequency, maxFrequency, frequencyRange;
+        switch (settings.frequencyScale) {
+          case FrequencyScale.Linear:
+            frequencyRange = settings.maxFrequency - settings.minFrequency;
+            minFrequency =
+              (1 - maxY / rect.height) * frequencyRange + settings.minFrequency;
+            maxFrequency =
+              (1 - minY / rect.height) * frequencyRange + settings.minFrequency;
+            break;
+          case FrequencyScale.Log:
+            frequencyRange =
+              Math.log10(settings.maxFrequency) -
+              Math.log10(settings.minFrequency);
+            minFrequency =
+              Math.pow(10, (1 - maxY / rect.height) * frequencyRange) +
+              settings.minFrequency;
+            maxFrequency =
+              Math.pow(10, (1 - minY / rect.height) * frequencyRange) +
+              settings.minFrequency;
+            break;
+          case FrequencyScale.Mel:
+            frequencyRange =
+              AnalyzeService.hzToMel(settings.maxFrequency) -
+              AnalyzeService.hzToMel(settings.minFrequency);
+            minFrequency =
+              AnalyzeService.melToHz(
+                (1 - maxY / rect.height) * frequencyRange,
+              ) + settings.minFrequency;
+            maxFrequency =
+              AnalyzeService.melToHz(
+                (1 - minY / rect.height) * frequencyRange,
+              ) + settings.minFrequency;
+            break;
+        }
         analyseSettingsService.minFrequency = minFrequency;
         analyseSettingsService.maxFrequency = maxFrequency;
       }

diff --git a/src/webview/components/spectrogram/spectrogramComponent.ts b/src/webview/components/spectrogram/spectrogramComponent.ts
@@ -218,10 +218,10 @@ export default class WaveFormComponent {
     for (let i = 0; i < numAxes; i++) {
       axisContext.fillStyle = "rgb(245,130,32)";
       const y = Math.round((i * height) / numAxes);
-      const maxMel = this._analyzeService.hzToMel(settings.maxFrequency);
-      const minMel = this._analyzeService.hzToMel(settings.minFrequency);
+      const maxMel = AnalyzeService.hzToMel(settings.maxFrequency);
+      const minMel = AnalyzeService.hzToMel(settings.minFrequency);
       const mel = ((numAxes - i) * (maxMel - minMel)) / numAxes + minMel;
-      const f = this._analyzeService.melToHz(mel);
+      const f = AnalyzeService.melToHz(mel);
       axisContext.fillText(`${Math.trunc(f)}`, 4, y - 4);
 
       axisContext.fillStyle = "rgb(180,120,20)";

diff --git a/src/webview/services/analyzeService.ts b/src/webview/services/analyzeService.ts
@@ -146,8 +146,12 @@ export default class AnalyzeService extends Service {
     const endIndex = Math.floor(settings.maxTime * sampleRate);
 
     const df = sampleRate / settings.windowSize;
-    const minFreqIndex = Math.floor(this.hzToMel(settings.minFrequency) / df);
-    const maxFreqIndex = Math.floor(this.hzToMel(settings.maxFrequency) / df);
+    const minFreqIndex = Math.floor(
+      AnalyzeService.hzToMel(settings.minFrequency) / df,
+    );
+    const maxFreqIndex = Math.floor(
+      AnalyzeService.hzToMel(settings.maxFrequency) / df,
+    );
 
     const ooura = new Ooura(windowSize, { type: "real", radix: 4 });
 
@@ -216,8 +220,12 @@ export default class AnalyzeService extends Service {
     minFreqIndex: number,
     maxFreqIndex: number,
   ) {
-    const minMel = this.hzToMel((minFreqIndex * sampleRate) / spectrum.length);
-    const maxMel = this.hzToMel((maxFreqIndex * sampleRate) / spectrum.length);
+    const minMel = AnalyzeService.hzToMel(
+      (minFreqIndex * sampleRate) / spectrum.length,
+    );
+    const maxMel = AnalyzeService.hzToMel(
+      (maxFreqIndex * sampleRate) / spectrum.length,
+    );
     const melStep = (maxMel - minMel) / (numFilters + 1);
 
     const filterBank: number[][] = [];
@@ -227,13 +235,13 @@ export default class AnalyzeService extends Service {
       const centerMel = minMel + (i + 1) * melStep;
       const endMel = minMel + (i + 2) * melStep;
       const startIndex = Math.round(
-        (this.melToHz(startMel) * spectrum.length) / sampleRate,
+        (AnalyzeService.melToHz(startMel) * spectrum.length) / sampleRate,
       );
       const centerIndex = Math.round(
-        (this.melToHz(centerMel) * spectrum.length) / sampleRate,
+        (AnalyzeService.melToHz(centerMel) * spectrum.length) / sampleRate,
       );
       const endIndex = Math.round(
-        (this.melToHz(endMel) * spectrum.length) / sampleRate,
+        (AnalyzeService.melToHz(endMel) * spectrum.length) / sampleRate,
       );
       for (let j = 0; j < spectrum.length; j++) {
         if (j < startIndex || j > endIndex) {
@@ -259,11 +267,11 @@ export default class AnalyzeService extends Service {
     return melSpectrum;
   }
 
-  public hzToMel(hz: number) {
+  public static hzToMel(hz: number) {
     return 2595 * Math.log10(1 + hz / 700);
   }
 
-  public melToHz(mel: number) {
+  public static melToHz(mel: number) {
     return 700 * (Math.pow(10, mel / 2595) - 1);
   }
 }