Estoy refactorizando mi código para que sea más limpio y reutilizable. Sin embargo, después de refactorizar el código, una de las funciones/características no funciona.

Hola chicos, estoy refactorizando mi código para que sea más limpio y reutilizable. Sin embargo, después de refactorizar el código, la función "dejar de reproducir música" no funciona. Se supone que funciona cuando hago un evento de clic en la ventana. ¿Pueden ayudarme cómo puedo solucionarlo? Gracias

Antes de refactorizar

const LoginPhone = () => {
 const domNavigate = useDomNavigate();
 const {openKioskAlert} = useContext(KioskAlertContext);
 const [phoneNumber, setPhoneNumber] = useState([]);
 const [isPlaying, setIsPlaying] = useState(true);
 const audioFile = new Audio(`/sounds/hello.mp3`);
 // play audio sound
 const playSound = () => {
 audioFile.play();
 };
 // stop audio sound
 const stopSound = () => {
 audioFile.pause();
 audioFile.currentTime = 0;
 };
 useEffect(() => {
 playSound();
// when there's click event on window, it stops playing the music
 const clickHandler = () => stopSound();
 window.addEventListener('click', clickHandler);
 return () => window.removeEventListener('click', clickHandler);
 }, []);

Después de refactorizado

const LoginPhone = () => {
 const domNavigate = useDomNavigate();
 const {openKioskAlert} = useContext(KioskAlertContext);
 const [phoneNumber, setPhoneNumber] = useState([]);
 const [isPlaying, setIsPlaying] = useState(true);
 const greetAudio = new Audio('/sounds/hello.mp3');
 useEffect(() => {
 playSound('hello');
 const clickHandler = () => stopSound('hello');
 window.addEventListener('click', clickHandler);
 return () => window.removeEventListener('click', clickHandler);
 }, []);

// start audio sound
export const playSound = (title: string) => {
 const greetAudio = new Audio('/sounds/hello.mp3');
 console.log('playSound');
 greetAudio.play();
};
// stop audio sound
export const stopSound = (title: string) => {
 const greetAudio = new Audio('/sounds/hello.mp3');
 greetAudio.pause();
 greetAudio.currentTime = 0;
};

Solución del problema

No funciona porque está perdiendo una referencia al audio anterior después de asignar uno nuevo. Primero pausa, luego asigna un nuevo sonido