javascript - 在 React 中有多个音频播放器，暂停除当前播放器之外的所有播放器

Question

我有一个播放列表组件，它根据播放列表中有多少曲目导入n个组件。<AudioPlayer />

我需要做的是暂停所有其他<AudioPlayer />组件，除了当前正在播放的组件。否则，您可以一次玩多个玩家，这不是 bueno。

在我的播放列表组件中，我能够同时获取当前正在播放的播放器和“未播放”的播放器：播放播放器时，它会触发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

如果它有助于使其更清晰，这是一张图片：

标签： javascriptreactjsaudiosetstate