在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

这是一张有助于清晰显示的图片：