feat: Added Tone.js

package-lock.json

@@ -23,6 +23,7 @@
         "react-router-dom": "^6.23.0",
         "react-scripts": "5.0.1",
         "react-tabs-scrollable": "^2.0.6",
+        "tone": "^15.0.4",
         "web-vitals": "^2.1.4",
         "zustand": "^4.5.2"
       }
@@ -5370,6 +5371,18 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/automation-events": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/automation-events/-/automation-events-7.0.5.tgz",
+      "integrity": "sha512-Ni6vhZg0mKmVlew1kxWAzWL7QY1LYDdoYgp6yF9OHeskDrjyJp2SqoKoPQYeiMYjeIlbSpnxXm/JI55VcmX5Wg==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.2.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.19",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
@@ -16343,6 +16356,16 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "node_modules/standardized-audio-context": {
+      "version": "25.3.72",
+      "resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.72.tgz",
+      "integrity": "sha512-Dvwu2NuqafQqWxUWoo6G9ze/cvVNlFDpmIOA8XjuItrfR0h/REjgjoYCT3Y7nbkUJKGoz8SqqVzR7JATQV4XeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.5",
+        "automation-events": "^7.0.5",
+        "tslib": "^2.6.2"
+      }
+    },
     "node_modules/static-eval": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
@@ -17144,6 +17167,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/tone": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/tone/-/tone-15.0.4.tgz",
+      "integrity": "sha512-Fr2xATgdkNhzwMZhrU0DXpkXQyambq73hjHRrBiC0Wkc6aPYRdmkySE9kRFAW878zgMiD+Lqvn/uNHt/7hbdnQ==",
+      "dependencies": {
+        "standardized-audio-context": "^25.3.70",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",

package.json

@@ -18,6 +18,7 @@
     "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "react-tabs-scrollable": "^2.0.6",
+    "tone": "^15.0.4",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.2"
   },

src/components/ScrollableTab.jsx

@@ -24,8 +24,6 @@ function ScrollableTab({ children }) {
     const redirectLoc = buttonAttributes["redirectLoc"]
       ? buttonAttributes.getNamedItem("redirectLoc").value
       : "";
-    console.log(actionType);
-    console.log(redirectLoc);
 
     if (actionType === "button") {
       window.location.href = redirectLoc;
@@ -57,7 +55,6 @@ function ScrollableTab({ children }) {
     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);
-    console.log(panVal);
     const frequencyVal = rightSideEnd
       ? Math.round((key / amountTabs) * key + 6)
       : Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6);

src/core/audio/AudioHandler.jsx

@@ -1,33 +1,42 @@
-import { Component } from "react";
 import * as Tone from "tone";
 import { pushToSonificationLog } from "../log/SensorLogger";
+import drumSample from "./samples/snare_drum.wav";
 
-export default class AudioHandler extends Component {
-  playTabEarconSonification() {
-    pushToSonificationLog("tab_earcon");
-  }
-
-  playTabModelSonification() {
-    pushToSonificationLog("tab_model");
-  }
-
-  playDetailEarconSonification() {
-    pushToSonificationLog("detail_earcon");
-  }
+const drumSynth = new Tone.Sampler({
+  C3: drumSample,
+}).toDestination();
 
-  playDetailModelSonification() {
-    pushToSonificationLog("detail_model");
-  }
-
-  setRotation(angle) {
+const setRotation = (angle) => {
   Tone.Listener.forwardX.value = Math.sin(angle);
   Tone.Listener.forwardY.value = 0;
   Tone.Listener.forwardZ.value = -Math.cos(angle);
-  }
+};
 
-  setRotationRamp(panner, angle, rampTime) {
+const setRotationRamp = (panner, angle, rampTime) => {
   panner.positionX.rampTo(Math.sin(angle), rampTime);
   panner.positionY.rampTo(0, rampTime);
   panner.positionZ.rampTo(-Math.cos(angle), rampTime);
-  }
+};
+
+export function playTabEarconSonification() {
+  pushToSonificationLog("tab_earcon");
+}
+
+export function playTabModelSonification() {
+  var loop = new Tone.Loop((time) => {
+    drumSynth.triggerAttackRelease("C3", "4n", time);
+  }, "4n");
+  loop.iterations = 2;
+  loop.start();
+  drumSynth.context.resume();
+  Tone.Transport.start();
+  pushToSonificationLog("tab_model");
+}
+
+export function playDetailEarconSonification() {
+  pushToSonificationLog("detail_earcon");
+}
+
+export function playDetailModelSonification() {
+  pushToSonificationLog("detail_model");
 }