As you can see, the PLAY/PAUSE icons are too small than intended as well as the whole player is thiner than intended as some viewer will have difficulties to see it. How can I make the whole player bigger? I read that we will not have access to individual controls (eg. Play)
What I want is the WHOLE audio player to be bigger where the PLAY/PAUSE ICONS as well as the SLIDER is more easly visible for everyone.
EDITED with webkit media control styles
<!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>
With the webkit audio control styles applied, the player now looks like as follows:
How can I fix that timeline(darker) to be of same size(height) as the gray, think timeline?
Advertisement
Answer
Here is custom styling for the audio tag. You can use audio::-webkit-media-controls-play-button to modify the play button itself, and you can use audio::-webkit-media-controls-timeline for the timeline like so:
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>
If you would like to make the whole audio player bigger, you can do this simply by doing the following:
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>
With the webkit controls, you can also make each item bigger if you want to make the whole player bigger. All of the webkit audio modifications allowed can be found below.
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
Hope this helped.