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

user_9886465 0
Viewed 282

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?

html5-audio css html javascript
3 Answers

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_136212430

As others have written, the player which is loaded when using the HTML <audio> element is created by the browser, therefore looks different in each browser and is extremely limited concerning the possibility of affecting its layout via CSS.

If you want to create a really individual audio player, there is a jQuery plugin called "jPlayer" which can be found here: https://jplayer.org/

You need some tweaking capabilities to apply it, but it really allows you to use your own graphics and CSS for all player elements. It seems old on first sight (well: it is old), but has been working (and still is) on two of my websites without the need to update/change it in more than ten years...

user_56416690

Browsers provide different default audio players. You cannot simply change all properties using basic CSS.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#styling_with_css:

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the HTMLMediaElement API to wire up their functionality.

There are some examples on the web of how you can style audio players using custom controls, e.g. on Codepen.io and how to use the API to change the state.

From https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs:

Part of the HTML5 spec, the HTMLMediaElement API provides features to allow you to control video and audio players programmatically — for example HTMLMediaElement.play(), HTMLMediaElement.pause(), etc. This interface is available to both and elements, as the features you'll want to implement are nearly identical. Let's go through an example, adding features as we go.

Unfortunately, it's not super trivial to create the HTML, style it, and use javascript to control the audio using the API.

One of many custom audio player examples on Codepen:
https://codepen.io/ozzie/pen/YPOBEJ
user_38425980
Related