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

Question

是否可以设置html5音频标签的样式？我没有找到任何有关如何做到这一点的资源。像改变玩家颜色这样简单的事情会很好:)

Answer 1

是! 带有“controls”属性的HTML5音频标签使用浏览器的默认播放器。您可以根据自己的喜好自定义它，不使用浏览器控件，而是滚动自己的控件并通过javascript与音频API通信。

幸运的是，其他人已经做到了这一点。我现在最喜欢的球员是jPlayer，它很有风格，效果很好。看看这个。

Answer 2

<audio>audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

Answer 3

是的：您可以隐藏内置浏览器UI（通过删除controls属性audio），然后构建您自己的界面并使用Javascript（源）控制播放：

<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类添加到元素（在本例中为div+ buttons），并根据需要设置样式。

MDN HTMLAudioElement API参考