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

【问题标题】：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} alt="album image" 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;

【问题讨论】：

标签： javascript reactjs sequelize.js use-effect audio-player

【解决方案1】：

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

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

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

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

【讨论】：