feat: add sound effect

src/pages/Home.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Sidebar from "../components/sidebar/Sidebar";
 import threeApp from "../three/index";
 import Permalink from "../components/sidebar/Permalink";
+import SwitchSound from "../assets/sounds/switch.mp3";
 
 export default function Home() {
   const rootEl = useRef(null);
@@ -15,6 +16,9 @@ export default function Home() {
     <>
       {showSidebar && <Sidebar />}
 
+      <audio id="switch-sound">
+        <source src={SwitchSound} type="audio/mpeg" />
+      </audio>
       <div
         id="canvas-wrapper"
         ref={rootEl}

src/three/key/key.js

@@ -10,6 +10,7 @@ import {
   updateMaterials,
 } from "./materials";
 import { keyGeometry, keyGeometryISOEnter } from "./geometry";
+import SoundUtil from "../../util/sound";
 
 export const KEYSTATES = {
   INITIAL: 0, // full height
@@ -178,6 +179,7 @@ export class Key {
       this.setState(KEYSTATES.MOVING_UP);
       this.queueRelease = false;
     }
+    SoundUtil.playClic();
   }
   updateColors(textureOnly) {
     this.colorway = ColorUtil.colorway;

src/util/sound.js

@@ -0,0 +1,11 @@
+export default class SoundUtil {
+  static switchSound = undefined;
+  static playClic() {
+    if (!this.switchSound) {
+      this.switchSound = document.getElementById("switch-sound");
+    }
+    if (this.switchSound) {
+      this.switchSound.cloneNode(true).play();
+    }
+  }
+}