如何在启动另一个反应音频播放器时停止播放？

Posted 2023-03-17

【中文标题】如何在启动另一个反应音频播放器时停止播放？

【英文标题】：How to stop one react audio player from playing when starting another?

【发布时间】：2022-01-15 11:50:07

【问题描述】：

我认为我需要使用状态来跟踪正在播放的歌曲，但我无法实现它。我不确定传递哪个参数来响应音频播放器或在哪里设置状态。这可能吗？这是整个组件的样子：

import  useState, useEffect  from 'react';
import ReactAudioPlayer from 'react-audio-player';
import  useSelector, useDispatch  from 'react-redux';
import  NavLink, useParams  from 'react-router-dom';

import  deleteSong, getOneSong  from '../../store/song';
import EditSongForm from '../EditSongForm';

const SpecificSong = ( id, songName, songLink, userId, albumImage ) => 
    const [editShowForm, setEditShowForm] = useState(false);
    // const [currentlyPlayingSong, setCurrentlyPlayingSong] = useState(false)

    const dispatch = useDispatch();

    useEffect(() => 
        dispatch(getOneSong(id));
        setEditShowForm(false);
    , [dispatch, id]);

    const editFormCheck = (e) => 
        if (editShowForm) setEditShowForm(false)
        if (!editShowForm) setEditShowForm(true)
    
    const remove = (e) => 
        dispatch(deleteSong(e.target.id));
    

    const user = useSelector((state) => state.session.user);
    const CurrentUserId = user?.id

    return (
        <div className='songdetails' key=id>
            <NavLink to=`/song/$id`>
                <p className='songname' key=id>songName</p>
                <img className="albumimage" src=albumImage  srcset="" />
                <ReactAudioPlayer
                    className='audioplayer'
                    src=songLink
                    controls
                    key=songLink
                />
            </NavLink>
            userId === CurrentUserId ?
                <>
                    <div className='editbutton'>
                        <EditSongForm props=id />
                    </div>
                    <div className='removebutton'>
                        <button id=id onClick=remove>Delete Song</button>
                    </div>
                </>
                : null
        </div>
    );
;

export default SpecificSong;

【参考方案1】：

我无法准确重现您的问题。但我想我可以提供帮助。

根据我的测试，这个库自己处理各个组件的播放和暂停，所以你不需要去碰它。

现在，要实现锁定机制，您可以存储一个音频播放器索引，用于跟踪正在播放的音频播放器的索引/键。如果没有玩家在玩，则该值默认为“-1”等数字。因此，每当您播放 react-audio-player 组件时，您首先要检查另一个音频播放器此时是否处于打开状态。如果它为 ON，请将其关闭并将您自己的键索引放在变量 AudioPlayerIndex 上。此变量可能存储在 Context API 或 Global Store 中，因为您的应用程序中的所有音频播放器组件都需要它。

从他们的 GitHub 存储库中看到的 API，链接在这里：https://github.com/justinmc/react-audio-player#readme