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

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

工具>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,
    };
};

我想做什么：例子

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 和 stopAudio 是如何被使用两次的。这类似于写 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();
        }
    }, []);

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

I want to play multiple audio files. So I created a function for it. But it can only play one audio.. How can I make it?

refactoring

reactjs

loginPhone.ts

工具>voice.ts

我想做什么：例子