audio 美化 css及html

要实现音频美化效果，可以通过CSS和HTML来实现。下面是一个简单的例子：

HTML代码：

<audio controls>
   <source src="audio_file.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
</audio>

CSS代码：

audio {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
}

audio::-webkit-media-controls-panel {
  background-color: #1a1a1a;
  color: #fff;
}

audio::-webkit-media-controls-play-button {
  background-color: #fff;
  color: #1a1a1a;
}

audio::-webkit-media-controls-timeline {
  background-color: #fff;
}

audio::-webkit-media-controls-volume-slider {
  background-color: #fff;
}

上面的代码中，使用了`<audio>`标签来实现音频播放器，并设置了宽度、高度和底部间距。然后使用CSS样式来美化音频播放器的样式，包括背景颜色、按钮颜色等。

需要注意的是，不同浏览器对于音频播放器的样式支持程度不同，上面的样式只适用于Chrome浏览器。如果要实现跨浏览器的音频美化效果，需要使用浏览器厂商前缀或者使用CSS库。