我将我的代码重构更加干净和重复使用。但是，在我重构代码后，功能/功能之一无效

Question

大家好，我正在更加干净，可重复使用。这是我想做的。

• 访问“登录”页面时，登录。mp3在页面上自动播放。 （“ PLZ输入您的电话号码~~”）

• 如果在屏幕上有任何单击事件/动作，音乐会停止播放。

• 当您移动“付款”页面时，付款.mp3文件会自动播放。

• 如果屏幕上有任何单击事件/动作，音乐会停止播放。

我希望你们能理解我想做的什么

，但是在我重构代码后，“停止播放音乐”功能不起作用。当我在窗口上单击事件时，应该可以工作。你们能帮我如何解决吗？在

重构

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);
    }, []);

;

LoginPhone.TSX

import {voiceAudio} from '../../src/common/utils/voice';

const LoginPhone = () => {
    const domNavigate = useDomNavigate();
    const {openKioskAlert} = useContext(KioskAlertContext);
    const [phoneNumber, setPhoneNumber] = useState([]);
    const {playAudio, stopAudio} = voiceAudio('login-phone');

    useEffect(() => {
        playAudio();
        return () => stopAudio();
    }, []);

Utils＆gt voice.ts

export const voiceAudio = (title: string) => {
    const audioFile = new Audio(`/sounds/${title}.mp3`);
    const playAudio = () => audioFile.play();
    const stopAudio = () => {
        audioFile.pause();
        audioFile.currentTime = 0;
    };
    return {
        playAudio,
        stopAudio,
    };
};

Answer 1

它不起作用，因为分配了新音频后，您会失去对旧音频的引用。
首先暂停，然后分配新声音