html - 是否可以设置 html5 音频标签的样式？

Question

我还没有找到任何关于如何做到这一点的资源。像改变播放器的颜色这样简单的东西会很好 :)

Answer 1

是的:您可以隐藏内置浏览器 UI(通过从 audio 中删除 controls 属性)，而是构建您自己的界面并使用 Javascript 控制播放( source ):

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

然后您可以使用 CSS 随意设置元素的样式。

MDN HTMLAudioElement API reference