Add mute button to top - Githubissues

idea from chatgpt
import React, { useState, createContext } from 'react';

export const SoundContext = createContext();

export const SoundController = ({ children }) => {
  const [isMuted, setIsMuted] = useState(false);

  const handleMuteClick = () => {
    setIsMuted(prevState => !prevState);
  }

  return (
    <SoundContext.Provider value={{ isMuted, handleMuteClick }}>
      <button onClick={handleMuteClick}>Mute</button>
      {children}
    </SoundContext.Provider>
  );
};

const App = () => {
  return (
    <SoundController>
      <Header />
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      {/* Other routes */}
    </SoundController>
  );
};

const MyComponentThatUseAudio = () => {
  const { isMuted } = useContext(SoundContext);
  const audioRef = useRef(new Audio('./sounds/sound.mp3'));

  useEffect(() => {
    if (isMuted) {
      audioRef.current.pause();
    } else {
      audioRef.current.play();
    }
  }, [isMuted,audioRef]);

  return <audio ref={audioRef} />;
}
ZacharyFolk / sandbox

Add mute button to top #17
