Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

390
Views
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?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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...

about 4 years ago · Juan Pablo Isaza Report

0

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
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!