При наличии нескольких аудиоплееров в React приостановите все, кроме текущего проигрывателя

Question

У меня есть компонент списка воспроизведения, который импортирует n количество <AudioPlayer /> компонентов в зависимости от количества дорожек в списке воспроизведения.

Что мне нужно сделать, это приостановить все остальные <AudioPlayer /> компонентов, кроме того, который воспроизводится в данный момент.В противном случае, вы можете играть одновременно с несколькими игроками, что не является буэно.

В моем компоненте Плейлист я могу захватить как текущего, так и неиграющего игрока: когда игрокво время игры запускается обработчик onPlay(), который захватывает ссылки всех установленных на данный момент игроков, затем я сравниваю это с плейлистом и, наконец, извлекаю игроков, которые в данный момент не играют.

Я застрял в обновлении состояния игроков, так что, когда я нажимаю кнопку воспроизведения на другом игроке, все остальные игроки останавливаются.

Компоненты <AudioPlayer /> имеют prop из playing, который я должен быть в состоянии использовать для передачи обновленного состояния воспроизведения при игре нового игрока.

Как я могусделать это?

Вот мой Playlist.js код:

import React, { Component } from 'react'
import AudioPlayer from 'react-cl-audio-player'

const streamUrl = 'https://mystreamurl.com/'
const waveUrl = 'https://mywaveformurl.com/waveforms/'

class Playlist extends Component {
    state = {
        playlist: this.props.tracks,
        playing: false,
        currentPlayer: '',
        notPlaying: []
    }

    onPlay = (refName, index) => {
        // Get list of AudioPlayer components from refs
        const players = Object.keys(this.refs).map((key, i) => {
            return this.refs[key]
        })

        if (players) {
            // get AudioPlayer that is playing
            const currentPlayer = players[index]

            // get playlist items that are not playing
            const notPlaying = this.state.playlist.filter(
                (track, trackIndex) => {
                    return trackIndex !== index
                }
            )

            // Compare playlist items that are not playing to AudioPlayer list
            // to find AudioPlayer components that are not playing
            var notPlayingPlayers = players.filter(function(obj) {
                return notPlaying.some(function(obj2) {
                    return obj.props.alt == obj2.track_audio
                })
            })

            console.log('Not Playing Players', notPlayingPlayers)
            // ^^ this gets me the <AudioPlayer /> components that arent playing

            const notPlayingPause = notPlayingPlayers.map((item, x) => {
                this.setState({
                    playing: false // I know this isn't correct.
                })
            })
        }
    }

    render() {
        const tracks = this.props.tracks
        const sku = this.props.sku
        const price = this.props.price
        const addToCart = this.props.addToCart

        const trackList = tracks.map((track, index) => {
            const songs = [
                {
                    url: `${streamUrl}${track.track_audio}_128.mp3`,
                    cover: '',
                    artist: {
                        name: ' ',
                        song: track.track_title
                    }
                }
            ]
            return (
                <li
                    key={sku + '-' + track.track_audio}
                    className="playlist-track"
                >
                    <span className="playlist-name">{track.track_title}</span>

                    <AudioPlayer
                        key={track.track_audio}
                        index={index}
                        songs={songs}
                        autoplay={false}
                        src={`${waveUrl}${track.track_audio}.png`}
                        alt={track.track_audio}
                        ref={track.track_audio + index}
                        onPlay={this.onPlay.bind(this, 'player', index)}
                        playing={this.state.playing}
                    />

                    <span className="playlist-price">$1.99</span>
                    <button
                        type="button"
                        className="button playlist-button"
                        onClick={() => {
                            addToCart({
                                product_id: track.track_product_id,
                                quantity: 1,
                                price: price,
                                cart_item_data: {
                                    name: track.track_title
                                }
                            })
                        }}
                    >
                        Add To Cart
                    </button>
                </li>
            )
        })
        return (
            <div className="playlist-wrap">
                <ul className="playlist">{trackList}</ul>
            </div>
        )
    }
}

export default Playlist

Вот изображение, если оно помогает сделать его более понятным: