css制作频谱

使用 CSS 制作音频频谱

使用 CSS 动画和伪元素

通过 CSS 动画和伪元素可以模拟简单的频谱效果。定义一个容器，内部包含多个条形元素，每个条形通过 @keyframes 动画实现高度变化。

<div class="spectrum">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <!-- 更多条形 -->
</div>

.spectrum {
  display: flex;
  align-items: flex-end;
  height: 100px;
  gap: 2px;
}

.bar {
  width: 10px;
  background: linear-gradient(to top, #ff00ff, #00ffff);
  animation: equalize 1.5s infinite alternate;
}

@keyframes equalize {
  0% { height: 10%; }
  100% { height: 100%; }
}

/* 为每个条形设置不同的动画延迟 */
.bar:nth-child(1) { animation-delay: 0.1s; }
.bar:nth-child(2) { animation-delay: 0.3s; }
.bar:nth-child(3) { animation-delay: 0.5s; }

结合 JavaScript 和 CSS 变量

通过 JavaScript 动态更新 CSS 变量，实现更真实的频谱效果。使用 AudioContext 分析音频数据，将频率数据映射到条形高度。

<div class="spectrum" id="spectrum"></div>
<audio id="audio" src="music.mp3" controls></audio>

const audio = document.getElementById('audio');
const spectrum = document.getElementById('spectrum');
const ctx = new AudioContext();
const analyser = ctx.createAnalyser();
const source = ctx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(ctx.destination);

// 创建频谱条形
for (let i = 0; i < 32; i++) {
  const bar = document.createElement('div');
  bar.className = 'bar';
  bar.style.setProperty('--height', '0');
  spectrum.appendChild(bar);
}

function updateSpectrum() {
  const dataArray = new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(dataArray);
  const bars = document.querySelectorAll('.bar');

  bars.forEach((bar, i) => {
    const height = dataArray[i] / 2;
    bar.style.setProperty('--height', `${height}%`);
  });
  requestAnimationFrame(updateSpectrum);
}

audio.addEventListener('play', () => {
  ctx.resume();
  updateSpectrum();
});

.spectrum {
  display: flex;
  align-items: flex-end;
  height: 200px;
  gap: 2px;
}

.bar {
  width: 8px;
  background: linear-gradient(to top, #ff00ff, #00ffff);
  height: var(--height);
  transition: height 0.1s ease-out;
}

使用 CSS 滤镜增强效果

通过 filter 属性为频谱添加发光或颜色效果，提升视觉冲击力。

.spectrum {
  filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.7));
}

.bar {
  mix-blend-mode: screen;
}

响应式设计

通过媒体查询调整频谱大小和布局，确保在不同设备上正常显示。

@media (max-width: 600px) {
  .spectrum {
    height: 120px;
  }
  .bar {
    width: 4px;
  }
}