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

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

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

Answer 3

是：您可以隐藏内置浏览器UI（通过从import Vue from 'vue/dist/vue.js'; var VueRouter = require('vue-router'); import App from '../components/App.vue'; import Dashboard from '../components/Dashboard.vue'; import Home from '../components/Home.vue'; import Register from '../components/Register.vue'; import Signin from '../components/Signin.vue'; Vue.use(VueRouter); export var router = new VueRouter() router.map({ '/': { name: 'home', component: require('../components/Home.vue') }, '/register': { name: 'register', component: Register } }) router.start(App, '#app');删除controls属性），然后构建您自己的界面并使用Javascript（source）控制播放：

audio

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

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

是的，可能来自@FábioZangirolami答案

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

Answer 10

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

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

Answer 11

我对音频组件进行了一些自定义。这是我所做的。

audio {
/*border-radius: 90px;*/
width: 250px;
height: 45px;
margin-top: 5px;
margin-bottom: 5px;
}

audio::-webkit-media-controls-mute-button {
display: none !important;
}

audio::-webkit-media-controls-volume-slider {
display: none !important;
}

audio::-webkit-media-controls-volume-control-container.closed {
display: none !important;
}
audio::-webkit-media-controls-volume-control-container{
display: none !important;
}

我发现这些自定义仅适用于 Edge 和 Chrome。不是火狐..

Answer 12

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

audio {
    enter code here;
}

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

12 个答案: