React中多音频源管理：如何实现播放互斥？

不需要Redux这类状态管理库，我们可以通过一个全局集合来跟踪所有正在播放的音频实例，在播放新音频时自动暂停其他音频。以下是具体实现：

步骤说明 #

1. 创建一个全局集合存储当前播放的音频实例，让所有组件都能访问到这个集合。
2. 给每个音频实例绑定pause事件，确保当音频被外部暂停时，组件的UI状态能同步更新。
3. 在播放新音频前，遍历全局集合暂停所有正在播放的音频，并清空集合。
4. 组件卸载时，从集合中移除自身的音频实例并暂停，避免内存泄漏。

修改后的组件代码 #

import React from 'react';
import playIcon from './images/play.png';
import pauseIcon from './images/pause.png';

// 全局集合：存储当前正在播放的音频实例
const playingAudios = new Set();

class Music extends React.Component {
  constructor(props) {
    super(props);
    this.state = { play: false };
    this.url = props.src;
    this.audio = new Audio(this.url);
    this.audio.preload = 'none';
    
    // 绑定事件：当音频被暂停时，同步更新组件状态
    this.handleAudioPause = () => {
      this.setState({ play: false });
    };
    this.audio.addEventListener('pause', this.handleAudioPause);
    
    this.togglePlay = this.togglePlay.bind(this);
  }

  togglePlay() {
    this.setState(prevState => {
      if (!prevState.play) {
        // 播放前：暂停所有正在播放的音频
        playingAudios.forEach(audio => {
          audio.pause();
        });
        playingAudios.clear();
        
        // 播放当前音频并加入集合
        this.audio.play();
        playingAudios.add(this.audio);
        return { play: true };
      } else {
        // 暂停当前音频并移出集合
        this.audio.pause();
        playingAudios.delete(this.audio);
        return { play: false };
      }
    });
  }

  componentWillUnmount() {
    // 卸载时清理：暂停音频、移出集合、移除事件监听
    this.audio.pause();
    playingAudios.delete(this.audio);
    this.audio.removeEventListener('pause', this.handleAudioPause);
  }

  render() {
    return (
      <div style={this.props.style} className={this.props.className}>
        {this.state.play ? (
          <button className="audio-button" aria-label="Pause" onClick={this.togglePlay}>
            <img src={pauseIcon} width="34" height="34" alt="Pause" />
          </button>
        ) : (
          <button className="audio-button" aria-label="Play" onClick={this.togglePlay}>
            <img src={playIcon} width="34" height="34" alt="Play" />
          </button>
        )}
      </div>
    );
  }
}

export default Music;

方案优势说明 #

• 全局集合playingAudios让所有组件共享播放状态，无需引入复杂的状态管理工具。
• 通过监听音频的pause事件，确保组件的UI状态（播放/暂停按钮）始终和音频实际状态保持一致，即使音频是被其他组件暂停的。
• 组件卸载时的清理操作避免了内存泄漏和残留的音频播放。

另外你之前用document.getElementsByTagName('audio')返回空的原因是：你的音频是通过new Audio()创建的内存中的音频实例，并没有挂载到DOM中，所以DOM查询找不到它们。而我们的方案直接管理这些JS实例，完美解决了这个问题。

内容的提问来源于stack exchange，提问作者quicklikerabbit