html5 audio样式修改,HTML5中 audio的样式设置

HTML5中的audio元素本身并没有提供太多的样式设置，但可以通过CSS来修改其样式。以下是一些常见的修改方式：

1. 修改控制条样式：

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

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

audio::-webkit-media-controls-volume-slider-container {
  width: 100px;
  height: 10px;
}

2. 隐藏控制条：

audio::-webkit-media-controls {
  display: none !important;
}

3. 修改播放按钮样式：

audio::-webkit-media-controls-play-button {
  background-image: url(play-button.png);
  background-size: contain;
}

4. 修改音量按钮样式：

audio::-webkit-media-controls-mute-button {
  background-image: url(mute-button.png);
  background-size: contain;
}

audio::-webkit-media-controls-volume-slider {
  background-image: url(volume-slider.png);
  background-size: contain;
}

注意：以上代码中的样式选择器都是针对webkit浏览器内核的，如果需要兼容其他浏览器，需要加入相应的前缀或使用通用选择器。