是否可以设置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&nbsp;id="player"&nbsp;src="vincent.mp3"></audio><div>&nbsp; &nbsp;&nbsp;<button&nbsp;onclick="document.getElementById('player').play()">Play</button>&nbsp; &nbsp;&nbsp;<button&nbsp;onclick="document.getElementById('player').pause()">Pause</button>&nbsp; &nbsp;&nbsp;<button&nbsp;onclick="document.getElementById('player').volume&nbsp;+=&nbsp;0.1">Vol&nbsp;+</button>&nbsp; &nbsp;&nbsp;<button&nbsp;onclick="document.getElementById('player').volume&nbsp;-=&nbsp;0.1">Vol&nbsp;-</button>&nbsp;</div>然后，您可以将CSS类添加到元素（在本例中为div+&nbsp;buttons），并根据需要设置样式。MDN&nbsp;HTMLAudioElement API参考