css中，怎么自定义audio标签

在CSS中，您可以通过直接选择audio元素来自定义audio标签的样式。但是，由于浏览器的默认控制UI无法通过CSS直接修改，您可以隐藏原生控制，并构建自己的自定义播放器界面。

以下是一个简单的例子，演示如何隐藏原生控制并添加自定义样式：

HTML:

<div class="custom-audio-player">
  <audio id="myAudio">
    <source src="your-audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <button id="play-button">Play</button>
  <!-- 其他自定义控件 -->
</div>

CSS:

/* 隐藏原生audio控件 */
audio::-webkit-media-controls-panel {
  display: none !important;
}
 
/* 自定义播放器样式 */
.custom-audio-player {
  /* 添加你的样式 */
}
 
/* 自定义播放按钮样式 */
#play-button {
  /* 添加你的样式 */
}

JavaScript:

const audio = document.getElementById('myAudio');
const playButton = document.getElementById('play-button');
 
playButton.addEventListener('click', function() {
  if (audio.paused) {
    audio.play();
    playButton.textContent = 'Pause';
  } else {
    audio.pause();
    playButton.textContent = 'Play';
  }
});

在这个例子中，我们隐藏了原生的播放器控件，并创建了一个简单的播放/暂停按钮。你可以根据需要添加更多的自定义控件，比如进度条、播放时间显示等。