如何在HTML5中设置音频面板的样式

<audio src="audio.mp3" controls></audio>

audio {
  width: 300px; /* 设置音频面板的宽度 */
  height: 50px; /* 设置音频面板的高度 */
  background-color: #f2f2f2; /* 设置音频面板的背景颜色 */
  border: 1px solid #ccc; /* 设置音频面板的边框样式 */
  border-radius: 5px; /* 设置音频面板的边框圆角 */
  padding: 10px; /* 设置音频面板的内边距 */
}

audio::-webkit-media-controls-panel {
  background-color: transparent; /* 设置音频面板的控制按钮背景颜色为透明 */
}

audio::-webkit-media-controls-play-button {
  background-color: #333; /* 设置音频面板的播放按钮背景颜色 */
  color: #fff; /* 设置音频面板的播放按钮文字颜色 */
  border-radius: 50%; /* 设置音频面板的播放按钮为圆形 */
  padding: 5px; /* 设置音频面板的播放按钮内边距 */
}

audio::-webkit-media-controls-time-remaining-display {
  color: #333; /* 设置音频面板的剩余时间文字颜色 */
}