css3 写一个 播放音频时的炫酷线条动画

好的，这里有一个简单的示例代码，可以实现一个播放音频时的炫酷线条动画：

HTML部分：

<audio id="myAudio" src="music.mp3"></audio>
<button id="playButton">播放</button>
<div id="waveform"></div>

CSS部分：

#waveform {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  position: relative;
}
#waveform:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: #f00;
  animation: waveform 2s linear infinite;
}
@keyframes waveform {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

JavaScript部分：

var audio = document.getElementById("myAudio");
var playButton = document.getElementById("playButton");
var waveform = document.getElementById("waveform");

playButton.addEventListener("click", function() {
  if (audio.paused) {
    audio.play();
    waveform.classList.add("playing");
  } else {
    audio.pause();
    waveform.classList.remove("playing");
  }
});

当用户点击“播放”按钮时，JavaScript代码将播放音频并给`#waveform`添加`playing`类。此类将触发CSS动画，从而在`#waveform`上创建一个逐渐增长的红色线条，以模拟音频波形。当用户再次点击“播放”按钮时，JavaScript将暂停音频并从`#waveform`中删除`playing`类，停止CSS动画。