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

Question

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

Answer 1

<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 2

是的:您可以隐藏内置浏览器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),并根据需要设置样式.

可以在此处找到HTMLAudioElement JavaScript接口的其他属性和方法.

Answer 3

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

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

Answer 4

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

Answer 5

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

audio {
    background-color: #95B9C7;
}

这将玩家改为淡蓝色.

Answer 6

肯也没错.

一个css标签:

audio {

}

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

这对我来说已经足够了; 看这个例子(警告,音频自动播放):www.thenewyorkerdeliinc.com

Answer 7

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

Answer 8

如果您使用的是 Chrome，请在 Chrome 开发工具设置中启用“显示用户代理影子 DOM”

现在你将能够看到所有的伪类

audio::-webkit-media-controls-panel

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

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

...

现在你可以设计它们

audio::-webkit-media-controls-panel

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

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

...

Answer 9

一些颜色调整

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

Answer 10

是的，有可能，来自 @F\xc3\xa1bio Zangirolami 的回答

\n\n

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {\n                background-color: red;\n}\n

\n

Answer 11

缺少最重要的一个 IMO 控件容器::-webkit-media-controls-enclosure：

&::-webkit-media-controls-enclosure {
    border-radius: 5px;
    background-color: green;
}