React音乐曲目应用优化：实现播放互斥（新曲目播放自动暂停旧曲目）

我开发了一个React应用，以列表形式展示音乐曲目数组，每个曲目对应一个具备播放/暂停功能的WavePlayer组件。现在需要优化组件逻辑：当用户播放某一曲目时，若再播放另一曲目，自动暂停正在播放的曲目，避免多曲目同时播放的混乱情况。

核心设计思路 #

• 将播放状态统一托管在父组件SoundStack，仅用一个状态字段playingTrackId记录当前正在播放的曲目ID（空值表示无曲目播放），简化状态管理。
• 父组件向每个子组件SoundBite传递：当前播放ID、播放状态变更回调。
• 子组件通过监听props变化，自动判断是否需要暂停自身播放；同时在用户操作播放/暂停时，通知父组件更新全局播放状态。

修改后的代码实现 #

1. SoundStack 父组件

import React, { Component } from 'react';
import SoundBite from './SoundBite';
import './SoundStack.scss';

class SoundStack extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      playingTrackId: "" // 仅记录当前播放的曲目ID
    };
    this.handleTrackPlay = this.handleTrackPlay.bind(this);
    this.handleTrackPause = this.handleTrackPause.bind(this);
  }

  // 处理曲目播放：更新当前播放ID
  handleTrackPlay(trackId) {
    this.setState({ playingTrackId: trackId });
  }

  // 处理曲目暂停：如果暂停的是当前播放曲目，清空播放ID
  handleTrackPause(trackId) {
    if (this.state.playingTrackId === trackId) {
      this.setState({ playingTrackId: "" });
    }
  }

  render() {
    return(
      <>
        <ul className="sound-stack">
          {this.props.stack.map((item, i) => (
            <li key={i}>
              <SoundBite 
                id={item.id}
                title={item.title}
                artist={item.artist}
                url={item.track}
                isCurrentPlaying={this.state.playingTrackId === item.id}
                onPlay={this.handleTrackPlay}
                onPause={this.handleTrackPause}
              />
            </li>
          ))}
        </ul>
      </>
    )
  }
}

export default SoundStack;

2. SoundBite 子组件

import React, { Component } from 'react';
import Grid from '@mui/material/Grid';
import WaveSurfer from 'wavesurfer.js'
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import PauseIcon from '@mui/icons-material/Pause';
import './SoundBite.scss';

class SoundBite extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isPlaying: false
    };
    this.waveformDomRef = React.createRef();
    this.wavesurfer = null;
  }

  componentDidMount(){
    this.startWaveSurfer(this.props.url);
  }

  // 监听props变化：如果当前播放的不是自己，自动暂停
  componentDidUpdate(prevProps) {
    if (this.wavesurfer && !this.props.isCurrentPlaying && this.state.isPlaying) {
      this.wavesurfer.pause();
      this.setState({ isPlaying: false });
    }
  }

  startWaveSurfer(url){
    this.waveformDomRef.current.innerHTML = "";
    this.wavesurfer = WaveSurfer.create({
      "container": this.waveformDomRef.current,
      "height": 40,
      "splitChannels": false,
      "normalize": false,
      "waveColor": "#8f8f8f",
      "progressColor": "#5fdd74",
      "cursorColor": "#ddd5e9",
      "cursorWidth": 2,
      "barWidth": 3,
      "barGap": 3,
      "barRadius": null,
      "barHeight": null,
      "barAlign": "",
      "minPxPerSec": 1,
      "fillParent": true,
      "url": url,
      "mediaControls": false,
      "autoplay": false,
      "interact": true,
      "dragToSeek": false,
      "hideScrollbar": false,
      "audioRate": 1,
      "autoScroll": true,
      "autoCenter": true,
      "sampleRate": 8000          
    })

    // 点击波形图播放时，同步更新状态
    this.wavesurfer.on('play', () => {
      this.setState({ isPlaying: true });
      this.props.onPlay(this.props.id);
    });

    this.wavesurfer.on('pause', () => {
      this.setState({ isPlaying: false });
      this.props.onPause(this.props.id);
    });
  }

  togglePlayPause(){
    this.wavesurfer.playPause();
  }

  render() {
    return (
      <div className="sound-bite">
        <Grid container spacing={1}>
          <Grid item xs={12} sm={12} md={12}>
            <div className="wrapperWave">
              <h3>{this.props.title}</h3>
              <h4>{this.props.artist}</h4>
              <div className="innerWrapper">
                <div className="controls">
                  {this.state.isPlaying
                    ? <PauseIcon className="pauseIcon" onClick={()=>this.togglePlayPause()} />
                    : <PlayArrowIcon className="playIcon" onClick={()=>this.togglePlayPause()} />
                  }
                </div>
                <div className="waveForm" ref={this.waveformDomRef} id="waveform"></div>                                    
              </div>
            </div>
          </Grid>
        </Grid>     
      </div>
    )
  }
}

export default SoundBite;

关键优化点 #

• 父组件仅维护playingTrackId单一状态，避免冗余的isStopped状态，逻辑更清晰。
• 子组件通过componentDidUpdate监听全局播放状态，自动同步自身播放状态，无需手动处理复杂的回调逻辑。
• 将WaveSurfer实例直接存在组件实例上（this.wavesurfer），而非state中，减少不必要的重渲染。
• 绑定WaveSurfer的play/pause事件，确保波形图点击操作也能同步更新全局状态。

内容的提问来源于stack exchange，提问作者The Old County