fix: Fixed spatiality for model-based tab.

src/components/ScrollableTab.jsx

@@ -49,22 +49,32 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
 
   const onHoverTab = (key) => {
     const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-    const panVal = rightSideEnd
-      ? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1)
-      : clamp(2 * ((-1 / amountTabs) * -1 * key + 1) - 4, -1, 1); // ((-1 / amountTabs) * key + 1);
+    const panVal = clamp(-2.6 * ((key - amountTabs / 2) / amountTabs), -1, 1);
+
+    const standardFrequencyFunction = function (key) {
+      return Math.round((1.25 * amountTabs * key) / amountTabs + 4);
+    };
     const frequencyVal = rightSideEnd
-      ? Math.round((key / amountTabs) * key + 6)
-      : Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6);
+      ? standardFrequencyFunction(key)
+      : Math.round(
+          (-1.25 * amountTabs * key) / amountTabs +
+            standardFrequencyFunction(amountTabs)
+        );
     var endValueVisible = isVisible(document.getElementById(endElement));
 
+    console.log(key);
+    console.log(panVal);
+    console.log(frequencyVal);
+    console.log("----");
+
     if (endValueVisible) {
       reachedEndValue = true;
     }
 
     if (type === "model") {
-      playTabModelSonification(panVal, frequencyVal, !rightSideEnd);
+      playTabModelSonification(panVal, frequencyVal, endValueVisible);
     } else if (type === "earcon") {
-      playTabEarconSonification(!rightSideEnd, key, amountTabs);
+      playTabEarconSonification(endValueVisible, key, amountTabs);
     }
 
     if (reachedEndValue && endValueVisible) {

src/core/audio/AudioHandler.jsx

@@ -26,7 +26,7 @@ import { generateChord } from "./ChordHelper";
 
 const drumSynth = new Tone.Sampler({
   C3: drumSample,
-}).toDestination();
+});
 
 const pianoSynth = new Tone.Sampler({
   C2: C3Piano,
@@ -71,7 +71,7 @@ const calculateDetailMotifVersion = function (textDensity, linkDensity) {
 };
 
 // D-Major Chord Progression
-// Tried out all major pop song chord progressions 
+// Tried out all major pop song chord progressions
 // C-Major, D-Major, G-Major and A-Major. This sounded best...
 const tabChordProgression = [
   generateChord(62, "major"),
@@ -99,11 +99,11 @@ const playChordEndSound = function () {
       synth.triggerAttackRelease("D3", "12n", time + 0.3);
     }, "12n").start();
     loop2.iterations = 2;
-    synth.context.resume();
     Tone.Transport.start();
     offCooldown = false;
     setTimeout(() => {
       offCooldown = true;
+      Tone.Transport.stop();
     }, 500);
   }
 };
@@ -152,26 +152,43 @@ export function playTabModelSonification(pannerVal, frequencyVal, endReached) {
     const frequencyString = frequencyVal + "n";
     const panner = new Tone.Panner3D({
       panningModel: "HRTF",
-      positionX: 1000,
-      positionY: 1000,
+      positionX: pannerVal * 5,
+      positionY: 0,
       positionZ: 0,
-    });
-    const synth = drumSynth.toDestination().connect(panner);
-    Tone.Listener.positionX.value = pannerVal * 5.0;
-    Tone.Listener.positionZ.value = 5.0;
+    }).toDestination();
+
+    const synth = drumSynth.connect(panner);
+
+    // Set the listener's position
+    Tone.Listener.positionX.value = 0;
+    Tone.Listener.positionY.value = 0;
+    Tone.Listener.positionZ.value = 0;
+
+    // Set the listener's orientation
+    Tone.Listener.forwardX.value = 0;
+    Tone.Listener.forwardY.value = 0;
+    Tone.Listener.forwardZ.value = 5;
+    Tone.Listener.upX.value = 0;
+    Tone.Listener.upY.value = 5;
+    Tone.Listener.upZ.value = 5;
+
     var loop = new Tone.Loop((time) => {
       synth.triggerAttackRelease("C3", frequencyString, time);
-    }, frequencyString).start();
-    loop.iterations = 2;
+    }, frequencyString);
 
-    if (frequencyVal > 12) {
+    loop.iterations = 2;
+    if (frequencyVal >= 10) {
       loop.iterations = 3;
     }
+
+    loop.start();
+
     Tone.Transport.start();
-    pushToSonificationLog("tab_model");
     offCooldown = false;
     setTimeout(() => {
       offCooldown = true;
+      synth.disconnect();
+      loop.stop();
     }, 500);
   }
 }
@@ -189,6 +206,7 @@ export function playDetailEarconSonification(textDensity, linkDensity) {
     offCooldown = false;
     setTimeout(() => {
       offCooldown = true;
+      Tone.Transport.stop();
     }, 500);
   }
 }