如何增加播放和暂停按钮的大小和HTML音频播放器的高度？
正如您所看到的，播放/暂停图标比预期的要小，而且整个播放器比预期的要细，因为有些观众将很难看到它。我怎么才能让整个玩家变大？我读到，我们将不能访问个人控制(例如。(演奏)
我想要的是整个音频播放器更大，其中播放/暂停图标以及滑块是更容易看到的每个人。
用webkit媒体控件样式编辑的
<!DOCTYPE html>
<html>
<style>
audio::-webkit-media-controls-play-button {
transform: scale(2, 2);
}
audio::-webkit-media-controls-timeline {
height: 20px;
}
</style>
<body>
<h1>The audio element</h1>
<audio controls controlsList="nodownload noplaybackrate" style="width:600px;">
<source
src="https://content.production.cdn.art19.com/segment_lists/d4e00ef7-1edc-41c2-b4c4-505f1742d71d/20220607-VGhlVGltRmVycmlzc1Nob3dfSW5zaWdodHMgZXAgMV9lZGl0ICgxKS5tcDM-697d12ab-6cb9-4ec3-8856-2bbd8d9c4152.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>使用webkit音频控制样式的，播放器现在看起来如下所示：
如何将时间线(较暗的)修正为与灰色的时间线相同的大小(高度)？
回答 3
Stack Overflow用户
发布于 2022-06-10 20:51:32
以下是audio标记的自定义样式。您可以使用audio::-webkit-media-controls-play-button修改play按钮本身，也可以对时间线使用audio::-webkit-media-controls-timeline，如下所示：
audio::-webkit-media-controls-play-button {
transform: scale(2, 2);
}
audio::-webkit-media-controls-timeline {
height: 20px;
transform: scale(1, 1.5);
}<h1>The audio element</h1>
<audio controls controlsList="nodownload noplaybackrate" style="width:600px;">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
如果您想使整个音频播放器更大，只需执行以下操作即可：
audio {
position: relative;
right: -600px;
transform: scale(3, 3);
}<audio controls controlsList="nodownload noplaybackrate" style="width:600px;">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
使用webkit控件，如果您想要使整个玩家更大，也可以使每个项目更大。所有允许的webkit音频修改都可以在下面找到。
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希望这能帮上忙。
Stack Overflow用户
发布于 2022-06-10 21:09:37
正如其他人所写的，在使用HTML元素时加载的播放器是由浏览器创建的，因此在每个浏览器中看起来都不一样，并且对于通过<audio>影响其布局的可能性非常有限。
如果您想要创建一个真正独立的音频播放器，可以在这里找到一个名为“jQuery”的jPlayer插件：https://jplayer.org/
您需要一些调整功能来应用它，但它确实允许您使用您自己的图形和CSS的所有播放器元素。乍一看，它看起来很旧(嗯:它很旧)，但是我的两个网站已经(而且现在仍然是)工作，而不用在十多年内更新/修改它……
Stack Overflow用户
发布于 2022-06-08 22:58:38
浏览器提供不同的默认音频播放器。不能简单地使用基本CSS更改所有属性。
来自css
您可以将影响块的属性设置为单个单元的默认控件样式，例如，您可以给它一个边框和边框半径、填充、边距等。但是，您不能为音频播放器中的各个组件设置样式(例如，更改按钮大小或图标、更改字体等)，并且控件在不同的浏览器中是不同的。 为了在浏览器之间获得一致的外观和感觉，您需要创建自定义控件；这些控件可以以您想要的任何方式进行标记和样式设置，然后可以与 API一起使用JavaScript来连接它们的功能。
web上有一些示例说明如何使用自定义控件对音频播放器进行样式设置，例如在Codepen.io上，以及如何使用API更改状态。
来自API接口
作为HTML5规范的一部分，HTMLMediaElement API提供了一些特性，允许您以编程的方式控制视频和音频播放器--例如HTMLMediaElement.play()、HTMLMediaElement.pause()等。这个接口对两个元素都是可用的，因为您希望实现的功能几乎是相同的。让我们来看一个例子，一边添加特性，一边添加功能。
不幸的是，创建HTML、样式和使用javascript来使用API控制音频并不是非常简单的事情。
One of many custom audio player examples on Codepen:
https://codepen.io/ozzie/pen/YPOBEJhttps://stackoverflow.com/questions/72552489
复制相似问题
腾讯云开发者
