fix: Made MBS work again...

src/components/ScrollableTab.jsx

@@ -9,14 +9,15 @@ import {
 } from "../core/audio/AudioHandler";
 import { Divider } from "@geist-ui/core";
 
-var amountTabs = 0;
 var reachedEndValue = false;
 var rightSideEnd = true;
-var endElement = amountTabs;
+var endElement = 0;
 var type = "";
 
 function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
   const [activeTab, setActiveTab] = useState(0);
+  const [amountTabs, setAmountTabs] = useState(children.length);
+  endElement = amountTabs;
   type = sonificationType;
 
   const saveMouseLog = function () {
@@ -41,17 +42,6 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
     onActiveTabChange(index);
   };
 
-  /*
-  const onTabClick = (index, type, action) => {
-    if (type === "button" && action) {
-      action();
-    } else if (type === "modal") {
-      setModalVisible(true);
-    }
-    setActiveTab(index);
-};
-*/
-
   const onHoverElement = () => {};
 
   const onHoverTab = (key) => {
@@ -69,13 +59,13 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
     }
 
     if (type === "model") {
-      playTabModelSonification();
+      playTabModelSonification(panVal, frequencyVal, false);
     } else if (type === "earcon") {
       playTabEarconSonification();
     }
 
     if (reachedEndValue && endValueVisible) {
-      //this.playChordEndSound();
+      playTabModelSonification(panVal, frequencyVal, true);
       if (rightSideEnd) {
         endElement = 1;
         rightSideEnd = false;
@@ -107,16 +97,14 @@ function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
   //var keys = Array.from({ length: amountTabs }, (_, i) => i + 1);
   // onFocus as an additional thingy?
   var tabId = 0;
-  amountTabs = children.length;
-  endElement = amountTabs;
 
   var tabs = children.map((k) => {
     tabId += 1;
     return (
       <Tab
         id={tabId}
-        onTouchStart={() => onHoverTab(k)}
-        onMouseOver={() => onHoverTab(k)}
+        onTouchStart={() => onHoverTab(tabId)}
+        onMouseOver={() => onHoverTab(tabId)}
         key={tabId}
         actionType={k.props.actionType}
         redirectLoc={k.props.redirectLoc}

src/core/audio/AudioHandler.jsx

@@ -20,6 +20,29 @@ const setRotationRamp = (panner, angle, rampTime) => {
 
 var offCooldown = true;
 
+const playChordEndSound = function () {
+  if (offCooldown) {
+    const synth = drumSynth.toDestination();
+
+    var loop = new Tone.Loop((time) => {
+      synth.triggerAttackRelease("C3", "4n", time);
+    }, "4n").start();
+    loop.iterations = 1;
+
+    var loop2 = new Tone.Loop((time) => {
+      synth.triggerAttackRelease("D3", "12n", time + 0.3);
+    }, "12n").start();
+    loop2.iterations = 2;
+    synth.context.resume();
+    Tone.Transport.start();
+    offCooldown = false;
+    setTimeout(() => {
+      offCooldown = true;
+    }, 500);
+  }
+};
+
+// Maybe also dat...
 export function playTabEarconSonification() {
   if (offCooldown) {
     var loop = new Tone.Loop((time) => {
@@ -27,7 +50,6 @@ export function playTabEarconSonification() {
     }, "4n");
     loop.iterations = 2;
     loop.start();
-    drumSynth.context.resume();
     Tone.Transport.start();
     pushToSonificationLog("tab_earcon");
     offCooldown = false;
@@ -37,14 +59,32 @@ export function playTabEarconSonification() {
   }
 }
 
-export function playTabModelSonification() {
+export function playTabModelSonification(pannerVal, frequencyVal, endReached) {
+
+  if(endReached) {
+    playChordEndSound();
+    return;
+  }
+
   if (offCooldown) {
+    const frequencyString = frequencyVal + "n";
+    const panner = new Tone.Panner3D({
+      panningModel: "HRTF",
+      positionX: 1000,
+      positionY: 1000,
+      positionZ: 0,
+    });
+    const synth = drumSynth.toDestination().connect(panner);
+    Tone.Listener.positionX.value = pannerVal * 5.0;
+    Tone.Listener.positionZ.value = 5.0;
     var loop = new Tone.Loop((time) => {
-      drumSynth.triggerAttackRelease("C3", "4n", time);
-    }, "4n");
+      synth.triggerAttackRelease("C3", frequencyString, time);
+    }, frequencyString).start();
     loop.iterations = 2;
-    loop.start();
-    drumSynth.context.resume();
+
+    if (frequencyVal > 12) {
+      loop.iterations = 3;
+    }
     Tone.Transport.start();
     pushToSonificationLog("tab_model");
     offCooldown = false;
@@ -54,6 +94,7 @@ export function playTabModelSonification() {
   }
 }
 
+// Menu Sonification Paper. :)
 export function playDetailEarconSonification(textDensity, linkDensity) {
   if (offCooldown) {
     var loop = new Tone.Loop((time) => {
@@ -73,12 +114,18 @@ export function playDetailEarconSonification(textDensity, linkDensity) {
 
 export function playDetailModelSonification(textDensity, linkDensity) {
   if (offCooldown) {
-    var loop = new Tone.Loop((time) => {
-      drumSynth.triggerAttackRelease("C3", "4n", time);
-    }, "4n");
-    loop.iterations = 2;
-    loop.start();
-    drumSynth.context.resume();
+    const synth = drumSynth.toDestination();
+
+    const textDensityFrequencyString = 2 * textDensity + "n";
+    var loop2 = new Tone.Loop((time) => {
+      synth.triggerAttackRelease("C3", textDensityFrequencyString, time);
+      synth.triggerAttackRelease(
+        "C3",
+        textDensityFrequencyString,
+        time + (0.1 + 0.8 / textDensity)
+      );
+    }, "4n").start();
+    loop2.iterations = (linkDensity - 1) / 2 + 1;
     Tone.Transport.start();
     pushToSonificationLog("detail_model");
     offCooldown = false;