diff --git a/package-lock.json b/package-lock.json index dbd4249..e494c6c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index aae0c28..6418aae 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx index 7804124..987543d 100644 --- a/src/components/ScrollableTab.jsx +++ b/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); diff --git a/src/core/audio/AudioHandler.jsx b/src/core/audio/AudioHandler.jsx index f23dccb..9dfa83e 100644 --- a/src/core/audio/AudioHandler.jsx +++ b/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"); - } +const drumSynth = new Tone.Sampler({ + C3: drumSample, +}).toDestination(); - playTabModelSonification() { - pushToSonificationLog("tab_model"); - } +const setRotation = (angle) => { + Tone.Listener.forwardX.value = Math.sin(angle); + Tone.Listener.forwardY.value = 0; + Tone.Listener.forwardZ.value = -Math.cos(angle); +}; - playDetailEarconSonification() { - pushToSonificationLog("detail_earcon"); - } +const setRotationRamp = (panner, angle, rampTime) => { + panner.positionX.rampTo(Math.sin(angle), rampTime); + panner.positionY.rampTo(0, rampTime); + panner.positionZ.rampTo(-Math.cos(angle), rampTime); +}; - playDetailModelSonification() { - pushToSonificationLog("detail_model"); - } +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"); +} - setRotation(angle) { - Tone.Listener.forwardX.value = Math.sin(angle); - Tone.Listener.forwardY.value = 0; - Tone.Listener.forwardZ.value = -Math.cos(angle); - } +export function playDetailEarconSonification() { + pushToSonificationLog("detail_earcon"); +} - 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 playDetailModelSonification() { + pushToSonificationLog("detail_model"); } diff --git a/src/core/audio/samples/snare_drum.wav b/src/core/audio/samples/snare_drum.wav new file mode 100644 index 0000000..a0f8383 Binary files /dev/null and b/src/core/audio/samples/snare_drum.wav differ