css 录音声波动效

要实现 CSS 录音声波动效，可以通过以下步骤进行：

1. 首先，为了能够展示声波效果，你可以使用一个具有音频波形的示例音频文件。你可以在网上搜索并下载一个合适的音频文件，或者录制自己的声音并将其转换为波形。

2. 在 HTML 文件中，使用 `<audio>` 元素将音频文件嵌入到页面中，并设置 `controls` 属性以显示音频控件供用户播放。

<audio controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
</audio>

3. 接下来，创建一个 `<div>` 元素作为声波容器，给它一个合适的宽度和高度，并将其放置在想要展示声波效果的位置。

<div class="wave-container"></div>

4. 使用 CSS 来绘制声波效果。你可以通过伪元素 `::before` 或 `::after` 来创建波形条。使用 `transform` 属性来控制波形条的高度和位置。

.wave-container::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  opacity: 0.7;
}

.wave-container::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  opacity: 0.4;
}

/* 添加动画效果 */
@keyframes wave-animation {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.3);
  }
}

.wave-container::before,
.wave-container::after {
  animation: wave-animation 1s infinite alternate;
}

5. 最后，使用 JavaScript 来控制声波效果的高度。监听音频播放事件，在事件处理函数中根据音频的当前播放时间来更新波形条的高度。

const audioElement = document.querySelector("audio");
const waveElement = document.querySelector(".wave-container");

audioElement.addEventListener("timeupdate", function() {
  const progress = audioElement.currentTime / audioElement.duration;
  const waveHeight = Math.max(0.3, progress) * 100; // 调整最小高度和最大高度
  waveElement.style.height = `${waveHeight}%`;
});

这样，当用户点击音频播放按钮时，声波效果就会开始显示，并根据音频的播放时间更新高度。你可以根据需要调整样式和动画效果。记得为 `.wave-container` 容器设置合适的尺寸和位置，以及调整动画持续时间和速度。