添加点击音效

src/App.js

@@ -63,6 +63,7 @@ import {LOCAL_ACTIVITY_C, LOCAL_WHEEL_INVITE_CODE} from "@constants/localkey";
 import LoadingFull from "@components/Loading/LoadingFull";
 import {ClickAwayListener} from "@mui/base/ClickAwayListener";
 import useGlobalClick from "@hooks/useGlobalClick";
+import SoundHelp from "@utils/SoundManger";
 const App = () => {
     const dispatch = useDispatch();
     const fetchStatus=useSelector(getFetchStatus);
@@ -168,6 +169,7 @@ const App = () => {
         appRef.current && appRef.current.scrollTo(0, 0);
         preventDefault();
         reProgressierInstallBanner();
+        SoundHelp.loadAllAudioFile();
         // preventTouchMove();
     }
     //初始化

src/hooks/useGlobalClick.js

@@ -1,9 +1,19 @@
 import {useEffect} from "react";
+import SoundHelp from "@utils/SoundManger";
+const buttonCache={
 
+}
 const useGlobalClick = () => {
     const checkIsButton=(target)=>{
         let tagName=target.tagName.toLowerCase();
+        let className=target.getAttribute("class");
+        if (buttonCache[className]!=null){
+            return buttonCache[className];
+        }
         if (tagName==="button"||tagName==="a"){
+            if (className!=null){
+                buttonCache[className]=target;
+            }
             return target;
         }
         let buttons=document.getElementsByTagName("button");
@@ -16,6 +26,9 @@ const useGlobalClick = () => {
                     for (let j = 0; j < btns.length; j++) {
                         let button=btns[j];
                         if (button.contains(target)){
+                            if (className!=null){
+                                buttonCache[className]=button;
+                            }
                             return button;
                         }
                     }
@@ -30,6 +43,7 @@ const useGlobalClick = () => {
         if (button){
             let clickAudio=button.getAttribute("clickAudio");
             if (clickAudio===false)return;
+            SoundHelp.playSound("button_click");
         }
     }
     useEffect(()=>{

src/utils/SoundManger.js

@@ -0,0 +1,97 @@
+import button_click from "@assets/sound/normal_click.mp3";
+const defaultAudio={
+    "button_click":button_click
+}
+class SoundManger {
+    constructor(){
+        this.audioOn=true;
+        this.audioContext=null;
+        this.audioBuffers=[];
+        this.baseUrl="";
+        this.isLoadAudioFile=false;
+        this.initModule();
+    }
+    initModule(url="@assets/"){
+        this.baseUrl=url;
+        this.audioBuffers = [];
+        window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext
+        this.audioContext = new window.AudioContext;
+    }
+    stopSound(name){
+        let audio = this.audioBuffers[name];
+        if(audio && audio.source)
+        {
+            audio.source.stop(0);
+            audio.source = null;
+        }
+    }
+    playSound(name,loop=false){
+        let audio = this.audioBuffers[name];
+        if (audio)
+            try {
+                audio.source = null;
+                audio.source = this.audioContext.createBufferSource();
+                audio.source.buffer = audio.buffer;
+                audio.source.loop = loop;
+                let a = this.audioContext.createGain();
+                if (loop)a.gain.value = .7;
+                else a.gain.value = 1;
+                audio.source.connect(a);
+                a.connect(this.audioContext.destination);
+                audio.source.start(0);
+            } catch (t) {
+                console.log(t)
+            }
+        else
+            console.log(name)
+    }
+    initSound(buf,name){
+        let self=this;
+        try {
+            this.audioContext.decodeAudioData(buf, function(t) {
+                self.audioBuffers[name] = {
+                    name: name,
+                    buffer: t,
+                    source: null
+                }
+            }, function(t) {
+                console.log("Error decoding file:" + name)
+            })
+        }
+        catch (e){
+            console.log(e)
+        }
+
+    }
+    loadAudioFile(url, name){
+        var request = new XMLHttpRequest;
+        request.open("GET", url, true);
+        request.responseType = "arraybuffer";
+        var self = this;
+        request.onload = function(t) {
+            self.initSound(request.response, name)
+        };
+        request.send();
+    }
+    loadAllAudioFile(){
+        if (!this.isLoadAudioFile) {
+            this.isLoadAudioFile = true;
+            let preAudios=[
+                "sound/normal_click.mp3"
+            ]
+            let preNames=[
+                "button_click"
+            ]
+            for (let i = 0; i < preAudios.length; i++) {
+                let path=preAudios[i];
+                let name=preNames[i];
+                if (this.baseUrl==="@assets/")path=defaultAudio[name];
+                else path=this.baseUrl+path;
+                if (path==null)return;
+                this.loadAudioFile(path,name);
+            }
+        }
+    }
+}
+const SoundHelp=new SoundManger();
+export default SoundHelp;