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

Question

我没有找到任何有关如何做到这一点的资源。像改变玩家颜色这样简单的事情会很好:)

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

MDN HTMLAudioElement API reference

Answer 4

标签的外观取决于浏览器，但您可以隐藏它，构建自己的界面并使用Javascript控制播放。

Answer 5

肯也没错。

一个css标签：

audio {

}

会得到一些结果。似乎它不希望玩家任何高度高于或低于25px，但宽度可以缩短或延长到一定程度。

这对我来说已经足够了;看这个例子（警告，音频自动播放）：www.thenewyorkerdeliinc.com

Answer 6

您必须创建自己的播放器，与HTML5音频元素接口。本教程将帮助http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

Answer 7

要改变播放器的颜色，只需在你的css文件中找到音频标签，例如在我的一个网站上播放器变得不可见（白底白字），所以我补充说：

audio {
    background-color: #95B9C7;
}

这将玩家改为淡蓝色。

Answer 8

一些颜色调整

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Answer 9

如果你想在CSS中设置浏览器标准音乐播放器的样式：

audio {
    enter code here;
}