嘿，我来帮你搞定这个React音乐列表的问题！你现在的核心问题是只用了一个全局的play状态和单个Audio实例，导致所有按钮都共用同一个状态，没法区分不同歌曲的播放状态。咱们可以通过重构状态和优化音频管理来实现「同一时间仅播放一首+显示当前播放信息」的需求，具体方案如下：

核心思路 #

1. 重构状态：用currentTrack记录当前播放的歌曲对象，isPlaying记录播放状态，精准控制每首歌的播放状态
2. 统一管理歌曲数据：把所有歌曲信息放到数组里，方便渲染和扩展
3. 复用Audio实例：只创建一个Audio对象，切换歌曲时更新src，确保同一时间只有一个音频在播放
4. 优化播放逻辑：区分「点击当前播放歌曲（切换播放/暂停）」和「点击其他歌曲（切换曲目并播放）」两种场景

完整代码实现 #

import React, { Component } from 'react';

class MusicPlayer extends Component {
  // 统一管理歌曲数据，可按需添加封面、歌手等字段
  tracks = [
    {
      id: 1,
      src: "http://streaming.tdiradio.com:8000/house.mp3",
      name: "House Radio Stream"
    },
    {
      id: 2,
      src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
      name: "SoundHelix Song 1"
    },
    {
      id: 3,
      src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
      name: "SoundHelix Song 2"
    },
    {
      id: 4,
      src: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
      name: "SoundHelix Song 3"
    }
  ];

  constructor(props) {
    super(props);
    this.state = {
      currentTrack: null, // 当前播放的歌曲对象
      isPlaying: false    // 是否处于播放状态
    };
    // 初始化一个空的Audio实例，复用它来播放所有歌曲
    this.audio = new Audio();
  }

  // 播放/暂停切换逻辑
  togglePlay = (track) => {
    const { currentTrack, isPlaying } = this.state;

    // 情况1：点击的是当前正在播放的歌曲 → 切换播放/暂停
    if (currentTrack && currentTrack.id === track.id) {
      if (isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play();
      }
      this.setState({ isPlaying: !isPlaying });
    } 
    // 情况2：点击的是其他歌曲 → 切换曲目并播放
    else {
      this.audio.pause(); // 先暂停当前音频
      this.audio.src = track.src; // 更新音频源
      this.audio.play(); // 播放新曲目
      this.setState({
        currentTrack: track,
        isPlaying: true
      });
    }
  };

  // 组件卸载时清理音频，避免内存泄漏
  componentWillUnmount() {
    this.audio.pause();
    this.audio.src = '';
  }

  render() {
    const { currentTrack, isPlaying } = this.state;

    return (
      <div style={{ padding: '20px' }}>
        {/* 当前播放歌曲信息展示 */}
        <div style={{ marginBottom: '20px', padding: '10px', border: '1px solid #eee' }}>
          {currentTrack ? (
            <p>🎵 当前播放: <strong>{currentTrack.name}</strong></p>
          ) : (
            <p>暂无播放歌曲</p>
          )}
        </div>

        {/* 歌曲列表按钮 */}
        <div>
          {this.tracks.map(track => (
            <button
              key={track.id}
              onClick={() => this.togglePlay(track)}
              style={{ 
                display: 'block', 
                margin: '8px 0', 
                padding: '8px 16px',
                // 给当前播放的按钮加高亮样式
                backgroundColor: currentTrack?.id === track.id && isPlaying ? '#4CAF50' : '#fff',
                color: currentTrack?.id === track.id && isPlaying ? '#fff' : '#333'
              }}
            >
              {(currentTrack?.id === track.id && isPlaying) ? '⏸️ 暂停' : '▶️ 播放'}
              - {track.name}
            </button>
          ))}
        </div>
      </div>
    );
  }
}

export default MusicPlayer;

关键改动说明 #

• 状态设计优化：不再用单一的play布尔值，而是用currentTrack和isPlaying组合，能精准识别哪首歌在播放，以及当前的播放状态
• 歌曲数据统一管理：把歌曲信息放到数组后，后续添加新歌曲只需要在数组里加一条数据即可，无需重复写按钮代码
• 复用Audio实例：避免创建多个Audio对象，节省浏览器资源，同时天然保证同一时间只有一个音频在播放
• 播放逻辑清晰：分场景处理点击事件，用户体验更符合预期
• 内存泄漏防护：在组件卸载时清理音频资源，避免不必要的内存占用

你可以根据自己的需求进一步扩展，比如添加进度条、音量控制、歌曲封面等功能~

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