Skip to content
Advertisement

How to increase the size of play and pause buttons and the height of an HTML audio player?

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)

enter image description here

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:

enter image description here

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.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement