Html 是否可以设置 html5 音频标签的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4126708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to style html5 audio tag?
提问by rabidmachine9
I haven't found any resources on how to do that. Something as simple as changing the color of the player would be nice to have :)
我还没有找到任何关于如何做到这一点的资源。像改变播放器的颜色这样简单的事情会很高兴:)
采纳答案by Benny
Yes! The HTML5 audio tag with the "controls" attribute uses the browser's default player. You can customize it to your liking by not using the browser controls, but rolling your own controls and talking to the audio API via javascript.
是的！带有“controls”属性的 HTML5 音频标签使用浏览器的默认播放器。您可以不使用浏览器控件，而是滚动您自己的控件并通过 javascript 与音频 API 对话，从而根据自己的喜好对其进行自定义。
Luckily, other people have already done this. My favorite player right now is jPlayer, it is very stylable and works great. Check it out.
幸运的是，其他人已经这样做了。我现在最喜欢的播放器是jPlayer，它非常有风格并且效果很好。一探究竟。
回答by Fábio Zangirolami
<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
参考：https: //chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive =0%2F%2F% 2F
回答by gilad mayani
Yes: you can hide the built-in browser UI (by removing the controlsattribute from audio) and instead build your own interface and control the playback using Javascript (source):
是的：您可以隐藏内置浏览器 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>
You can then style the elements however you wish using CSS.
然后，您可以使用 CSS 随意设置元素的样式。
回答by Mihai
The appearance of the tag is browser-dependent, but you can hide it, build your own interface and control the playback using Javascript.
标签的外观取决于浏览器，但您可以隐藏它，构建自己的界面并使用 Javascript 控制播放。
回答by Arthur Veselov
some color tunings
一些颜色调整
audio {
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
width: 200px;
height: 25px;
}
回答by katzkode
You have to create your own player that interfaces with the HTML5 audio element. This tutorial will help http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
您必须创建自己的与 HTML5 音频元素交互的播放器。本教程将帮助http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/
回答by Nick
Ken had it right as well.
肯也说得对。
a csstag:
一个css标签：
audio {
}
will get you some results. seems it doesnt want the player any height above or below 25px but the width can be shortened or lengthened to an extent.
会给你一些结果。似乎它不希望播放器的高度高于或低于 25px，但宽度可以在一定程度上缩短或延长。
this was good enough for me; see this example (warning, audio plays automatically): www.thenewyorkerdeliinc.com
这对我来说已经足够了；看这个例子（警告，音频自动播放）：www.thenewyorkerdeliinc.com
回答by Karin
To change just the colour of the player, simply address the audio tag in your css file, for instance on one of my sites the player became invisible (white on white) so I added:
要仅更改播放器的颜色，只需解决 css 文件中的音频标签，例如在我的一个网站上，播放器变得不可见（白底白字），所以我添加了：
audio {
background-color: #95B9C7;
}
This changed the player to light blue.
这将播放器更改为浅蓝色。
回答by Hernán Eche
Yes, it's possible, from @Fábio Zangirolami answer
是的，有可能，来自@Fábio Zangirolami 的回答
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
background-color: red;
}
回答by Kenneth Klippert
If you want to style the browsers standard music player in the CSS:
如果要在 CSS 中设置浏览器标准音乐播放器的样式：
audio {
enter code here;
}
