我想播放多个音频文件。因此，我为此创建了一个函数。但是它只能播放一个音频..我该怎么做？

Question

我正在尝试使VoiceAudio作为模板，以便我可以播放多个音频。但是目前我只能播放一个音频。如果我像下面的示例一样带两个voiceaudio，其中一个不会玩。

我该如何工作？

loginphone.ts

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; poice.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,
    };
};

我想做的事情：示例

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

const LoginPhone = () => {
    const domNavigate = useDomNavigate();
    const {openKioskAlert} = useContext(KioskAlertContext);
    const [phoneNumber, setPhoneNumber] = useState([]);

// if I bring bring?!two voiceAudio, one of them wouldn't work..
    const {playAudio, stopAudio} = voiceAudio('login-phone);
    const {playAudio, stopAudio} = voiceAudio('login-pin);


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

    const play =

Answer 1

问题可能是您正在尝试多次使用相同的变量名称。请注意Playaudio和potaudio正在使用两次。这类似于编写const a = 8; const a = 5。

尝试使用第二个voiceaudio使用不同的名称：

    const {playAudio, stopAudio} = voiceAudio('login-phone');
    const {playAudio: playAudio2, stopAudio: stopAudio2} = voiceAudio('login-pin');

这将允许您在第二行上引用playaudio，为playaudio2，并参考stopaudio在第二行上，stopaudio2。

在您的useeffect中，您应该能够以这样的方式自由调用两个功能：

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