Angular中为WaveSurfer频谱图添加Colorbar的实现方法

我在Angular项目中使用WaveSurfer及其Spectrogram插件和colormap实现了音频文件的频谱图，现需为其添加颜色条(Colorbar)，求实现方案。

当前实现代码 #

this.wave = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#5A5A5A',//'violet',
  progressColor: '#C2B280',//'purple',
  height:200,
  barHeight: 2,
  plugins: [
    SpectrogramPlugin.create({
      container: '#wave-spectrogram',
      labels:true,
      colorMap:colors
    }),
 ]})

效果对比 #

• 预期效果：
  
• 当前效果：
  

实现方案 #

方案一：手动生成颜色条（无第三方依赖） #

无需额外引入库，直接通过DOM和CSS实现，适配你当前使用的colorMap数组。

1. 添加HTML容器

在频谱图容器旁新增颜色条的DOM结构：

<div class="spectrogram-wrapper">
  <div id="wave-spectrogram"></div>
  <div class="colorbar-group">
    <div id="colorbar"></div>
    <div class="colorbar-ticks">
      <span>低幅值</span>
      <span>中幅值</span>
      <span>高峰值</span>
    </div>
  </div>
</div>

2. 编写样式

通过CSS控制颜色条的布局和外观，确保和频谱图高度匹配：

.spectrogram-wrapper {
  display: flex;
  align-items: flex-end;
}

.colorbar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 12px;
}

#colorbar {
  width: 24px;
  height: 200px; /* 和频谱图height参数保持一致 */
  border-radius: 4px;
}

.colorbar-ticks {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  width: 100px;
  font-size: 12px;
}

3. 动态生成渐变背景

在Angular组件中，根据colorMap数组生成对应的线性渐变，绑定到颜色条上：

// 在WaveSurfer初始化完成后执行
this.wave.on('ready', () => {
  this.renderColorbar();
});

private renderColorbar(): void {
  const colorbarEl = document.getElementById('colorbar');
  if (!colorbarEl || this.colors.length === 0) return;

  // 根据colorMap数组生成渐变断点
  const gradientSegments = this.colors.map((color, idx) => {
    const percentage = (idx / (this.colors.length - 1)) * 100;
    return `${color} ${percentage}%`;
  }).join(', ');

  colorbarEl.style.background = `linear-gradient(to bottom, ${gradientSegments})`;
}

方案二：用D3.js生成带精准刻度的颜色条 #

如果需要更专业的数值刻度（比如对应频谱的分贝值范围），可以借助D3.js来实现：

1. 安装D3依赖

npm install d3

2. 组件中实现颜色条逻辑

import * as d3 from 'd3';

// 假设频谱图的幅值范围是[-100, 0]分贝，可根据实际情况调整
private readonly dB_RANGE = [-100, 0];

// 在WaveSurfer ready事件中调用
private renderD3Colorbar(): void {
  const container = d3.select('#colorbar-container');
  const height = 200; // 和频谱图高度一致
  const width = 24;

  // 创建颜色比例尺，映射分贝值到colorMap颜色
  const colorScale = d3.scaleLinear()
    .domain(this.dB_RANGE)
    .range([this.colors[0], this.colors[this.colors.length - 1]])
    .interpolate(d3.interpolateRgb);

  // 创建渐变
  const gradient = container.append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('defs')
    .append('linearGradient')
    .attr('id', 'colorbar-gradient')
    .attr('x1', '0%')
    .attr('y1', '100%')
    .attr('x2', '0%')
    .attr('y2', '0%');

  // 添加渐变断点
  this.colors.forEach((color, idx) => {
    const offset = (idx / (this.colors.length - 1)) * 100;
    gradient.append('stop')
      .attr('offset', `${offset}%`)
      .attr('stop-color', color);
  });

  // 绘制颜色条矩形
  container.select('svg')
    .append('rect')
    .attr('width', width)
    .attr('height', height)
    .style('fill', 'url(#colorbar-gradient)');

  // 添加刻度轴
  const yScale = d3.scaleLinear()
    .domain(this.dB_RANGE)
    .range([height, 0]);

  const yAxis = d3.axisRight(yScale)
    .ticks(5);

  container.select('svg')
    .append('g')
    .attr('transform', `translate(${width}, 0)`)
    .call(yAxis);
}

3. 对应HTML容器

<div class="spectrogram-wrapper">
  <div id="wave-spectrogram"></div>
  <div id="colorbar-container"></div>
</div>

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