如何为WaveSurfer多波形播放列表中的每个波形分配独特颜色

我来帮你搞定这个问题～你现在的代码之所以没生效，核心问题是传递和遍历数据的方式不对，咱们一步步修正：

问题出在哪？ #

你原来试图把单独的URL数组和颜色数组传给Playlist组件，但map函数的参数规则是(当前元素, 索引, 原数组)，所以你写的tracks.map((url, colour, index)里，colour其实拿到的是当前元素的索引值，不是你定义的颜色数组里的对应颜色，自然渲染不出正确的颜色。而且组件接收的tracks参数和你传递的urls+colours也不匹配。

正确的解决方案 #

我们可以把每个音轨的URL和对应颜色绑定成对象，组成一个对象数组，这样每个音轨的信息是完整且对应的，遍历的时候直接解构就能拿到正确的值。

以下是修正后的完整代码：

import { memo, useState } from 'react';
// 假设你已经正确导入了WaveSurferPlayer

// 修正后的Playlist组件
const Playlist = memo(({ tracks, setCurrentPlayer }) => {
  return tracks.map(({ url, waveColor }, index) => (
    <WaveSurferPlayer
      key={url}
      height={100}
      waveColor={waveColor}
      // 可选：基于波形颜色生成同色系深色进度条，视觉更协调
      progressColor={waveColor.replace(/rgb\((\d+), (\d+), (\d+)\)/, (_, r, g, b) => `rgb(${r * 0.6}, ${g * 0.6}, ${b * 0.6})`)}
      barWidth={2}
      barHeight={2}
      barGap={1}
      barRadius={2}
      url={url}
      onPlay={setCurrentPlayer}
      onReady={index === 0 ? setCurrentPlayer : undefined}
    />
  ));
});

// 把音轨URL和对应颜色整合成对象数组
const audioTracks = [
  { url: './audio/01.mp3', waveColor: 'rgb(0, 135, 135)' },
  { url: './audio/02.mp3', waveColor: 'rgb(200, 255, 200)' },
  { url: './audio/03.mp3', waveColor: 'rgb(200, 255, 0)' },
  { url: './audio/04.mp3', waveColor: 'rgb(200, 0, 200)' },
];

const App = () => {
  const [currentPlayer, setCurrentPlayer] = useState();

  return (
    <>
      <p>Playlist</p>
      <Playlist tracks={audioTracks} setCurrentPlayer={setCurrentPlayer} />
      {/* 其他组件内容... */}
    </>
  );
};

export default App;

关键细节说明 #

1. 数据结构调整：audioTracks变成了对象数组，每个元素包含url和对应的waveColor，这样每个音轨的信息是绑定在一起的，不会因为索引错位导致颜色匹配错误。
2. 遍历逻辑修正：在tracks.map里，我们用解构语法({ url, waveColor }, index)直接拿到每个音轨的URL和颜色，避免了对索引的错误使用。
3. 进度条颜色优化：我额外加了一个小技巧——基于波形颜色生成同色系的深色进度条，用正则表达式调整RGB值的亮度，这样界面会更协调，你也可以直接写死固定的进度条颜色，根据需求调整就行。

这样修改后，每个波形就会显示你定义的独特颜色啦～

内容来源于stack exchange