css3 写一个不规则运动的音频动画

好的，我可以给你提供一个基于CSS3的音频动画示例，实现不规则运动的效果。

首先，我们需要定义一个 `audio` 元素来播放音频，然后将其隐藏：

<audio id="audio" src="your-audio-file.mp3" preload="auto"></audio>

接着，我们需要定义一个 `div` 元素来承载音频动画，并设置一些基本样式：

<div id="audio-visualizer"></div>

#audio-visualizer {
  position: relative;
  width: 100%;
  height: 200px;
  background: #333;
}

然后，我们可以使用 `::before` 伪元素和 `animation` 属性来创建动画效果。我们可以使用 `transform` 属性来实现不规则运动。同时，我们需要结合音频的频谱数据来控制动画的速度和幅度。以下是完整的 CSS 代码：

#audio-visualizer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  animation: visualizer 200ms linear infinite;
}

@keyframes visualizer {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 控制动画速度和幅度 */
#audio-visualizer::before {
  animation-duration: 200ms;
  animation-timing-function: linear;
}

#audio-visualizer[data-audio-playing="true"]::before {
  animation-play-state: running;
}

#audio-visualizer[data-audio-playing="false"]::before {
  animation-play-state: paused;
}

#audio-visualizer[data-audio-peak="true"]::before {
  animation-duration: 100ms;
  animation-timing-function: ease-out;
  transform: scaleY(3);
}

最后，在 JavaScript 中，我们需要监听音频的播放事件，并根据频谱数据来控制动画的速度和幅度。以下是示例代码：

const audio = document.getElementById('audio');
const visualizer = document.getElementById('audio-visualizer');

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaElementSource(audio);
const analyser = audioContext.createAnalyser();

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

source.connect(analyser);
analyser.connect(audioContext.destination);

const updateVisualizer = () => {
  analyser.getByteFrequencyData(dataArray);

  const average = dataArray.reduce((acc, val) => acc + val, 0) / bufferLength;
  const peak = Math.max(...dataArray) > 230;

  visualizer.dataset.audioPeak = peak;
  visualizer.dataset.audioPlaying = !audio.paused;

  requestAnimationFrame(updateVisualizer);
};

updateVisualizer();

这样，我们就完成了一个基于CSS3的不规则运动的音频动画效果。