Sound on

gcgbarbosa · May 5, 2023 · 8ea24e0 · 8ea24e0 · vercel · May 5, 2023
1 parent c5656ee
commit 8ea24e0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "eslint-config-next": "13.3.4",
     "next": "13.3.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "tone": "^14.7.77"
   },
   "devDependencies": {
     "eslint": "^8.39.0",

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -4,10 +4,14 @@ import anime from "animejs"
 import { Container, Typography, Box, Stack } from '@mui/material';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
+import * as Tone from 'tone'
+
+
 export default function Home() {
   const [action, setAction] = useState("Welcome :)");
 
   useEffect(() => {
+
     let animation = anime.timeline({
       easing: 'linear',
       loop: true
@@ -20,6 +24,9 @@ export default function Home() {
       duration: 3000,
       fill: '#FF0000',
       changeBegin: function() {
+        //play a middle 'C' for the duration of an 8th note
+        const synth = new Tone.Synth().toDestination();
+        synth.triggerAttackRelease("C4", "8n");
         setAction("Breathe IN")
       },
     })
@@ -31,6 +38,8 @@ export default function Home() {
       duration: 12000,
       fill: '#33CC33',
       changeBegin: function() {
+        const synth = new Tone.Synth().toDestination();
+        synth.triggerAttackRelease("E4", "8n");
         setAction("Breathe OUT")
       },
     });