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;
}
}
