帮我写一个播放进度条上体现音频可视化的动画使用js和css

好的，以下是一个简单的示例代码：

HTML：

<div class="audio-container">
  <audio src="your-audio-source.mp3" id="audio"></audio>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

CSS：

.audio-container {
  position: relative;
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ff8c00;
  border-radius: 5px;
  animation: progress-animation 2s linear infinite;
  animation-play-state: paused;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

JS：

const audio = document.getElementById('audio');
const progressBar = document.querySelector('.progress');

audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

audio.addEventListener('play', () => {
  progressBar.style.animationPlayState = 'running';
});

audio.addEventListener('pause', () => {
  progressBar.style.animationPlayState = 'paused';
});

在这个示例中，我们首先创建了一个包含音频元素和进度条的容器。进度条由一个背景和一个表示进度的元素组成。我们使用CSS动画来创建一个进度动画，它会在播放时运行，并在暂停时停止。

在JavaScript中，我们为音频添加了几个事件侦听器。当时间更新时，我们计算出当前进度并将其应用于进度条元素。当音频播放时，我们启动动画，当音频暂停时，我们停止动画。

请注意，这只是一个简单的示例，你可以根据自己的需求进行更改和调整。