Customize HTML5 Audio Player with CSS

Basically, HTML5 audio player can’t be styled if we used the “controls” attribute inside the audio tag. But, we can easily customize the player interface if we have a custom controls function. If you have tried to style the HTML5 audio player, you may have not got the result. It is because the “controls” attribute replaces the default browser’s audio player. So, this tutorial explains how you can customize an HTML5 audio player with CSS.

Before starting the customization process, I’d suggest you browse the demo page to test the audio player. There, I have placed two audio players, one of them is the default browser player and the other one is the CSS customized audio player with custom controls.

We need to create the custom HTML tags for the audio player interface in order to style these elements with CSS. After that, we’ll get all these elements in JavaScript and attach the function. Basically, you don’t need to deal with JavaScript code as we are going to share the JavaScript file for the custom audio player. Anyhow, you can define the additional CSS styles to customize the audio player according to your needs. So, let’s create the HTML structure for a custom audio player.

Create HTML5 Audio Player

In HTML, create a div tag with "audio-player" class that will be used as a player’s container. Similarly, create elements for timeline, progress, controls, etc as described below:

<div class="audio-player">
  <div class="timeline">
    <div class="progress"></div>
  </div>
  <div class="controls">
    <div class="play-container">
      <div class="toggle-play play">
    </div>
    </div>
    <div class="time">
      <div class="current">0:00</div>
      <div class="divider">/</div>
      <div class="length"></div>
    </div>
    <div class="name">Music Song</div>
<!--     credit for icon to https://saeedalipoor.github.io/icono/ -->
    <div class="volume-container">
      <div class="volume-button">
        <div class="volume icono-volumeMedium"></div>
      </div>
      
      <div class="volume-slider">
        <div class="volume-percentage"></div>
      </div>
    </div>
  </div>
</div>

In the <div class="name"> tag you can add the custom text (music name etc). Similarly, you can also add some extra elements (audio thumbnails, etc) to the above HTML.

The CSS Styles

After creating the HTML elements, now we’ll use the CSS to customize the audio player. The "audio-player " class is the player’s container, define its width, height, background color, and font-size, etc. Similarly, define the box-shadow and keep the overflow hidden. Use the CSS display grid property in which we’ll place the player’s controls.

.audio-player {
  height: 50px;
  width: 350px;
  background: #444;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}

Likewise, define the styles for the timeline. Set background color and keep its relative position with 100% width.

.audio-player .timeline {
  background: white;
  width: 100%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 10px 0 #0008;
}

Keep the 0% width for the progress bar, set the background color, and define the 100% height.

.audio-player .timeline .progress {
  background: coral;
  width: 0%;
  height: 100%;
  transition: 0.25s;
}

The "controls" class is the container for the audio player control buttons. Define CSS styles for this container as described below:

.audio-player .controls {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px;
}
.audio-player .controls > * {
  display: flex;
  justify-content: center;
  align-items: center;
}

Similarly, create the CSS styles for the toggle play/pause button. You can also set the custom icon for these buttons according to your needs.

.audio-player .controls .toggle-play.play {
  cursor: pointer;
  position: relative;
  left: 0;
  height: 0;
  width: 0;
  border: 7px solid #0000;
  border-left: 13px solid white;
}
.audio-player .controls .toggle-play.play:hover {
  transform: scale(1.1);
}
.audio-player .controls .toggle-play.pause {
  height: 15px;
  width: 20px;
  cursor: pointer;
  position: relative;
}
.audio-player .controls .toggle-play.pause:before {
  position: absolute;
  top: 0;
  left: 0px;
  background: white;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:after {
  position: absolute;
  top: 0;
  right: 8px;
  background: white;
  content: "";
  height: 15px;
  width: 3px;
}
.audio-player .controls .toggle-play.pause:hover {
  transform: scale(1.1);
}

Now, target the "time" class that displays the audio duration. Display this element as CSS flex and define some padding value.

.audio-player .controls .time {
  display: flex;
}
.audio-player .controls .time > * {
  padding: 2px;
}

The "volume-container" contains the volume button and slider. Keep its relative position and pointer cursor property. Likewise, set the height for the volume button and display it as flex.

.audio-player .controls .volume-container {
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.audio-player .controls .volume-container .volume-button {
  height: 26px;
  display: flex;
  align-items: center;
}
.audio-player .controls .volume-container .volume-button .volume {
  transform: scale(0.7);
}

Keep the absolute position for the volume slider, set the top left value as 15px and -3px respectively. Also, define the background color, height, and z-index as mentioned beow:

.audio-player .controls .volume-container .volume-slider {
  position: absolute;
  top: 15px;
  left: -3px;
  z-index: -1;
  width: 0;
  height: 15px;
  background: white;
  box-shadow: 0 0 20px #000a;
  transition: 0.25s;
}
.audio-player .controls .volume-container .volume-slider .volume-percentage {
  background: coral;
  height: 100%;
  width: 75%;
}
.audio-player .controls .volume-container:hover .volume-slider {
  left: -123px;
  width: 120px;
}

Finally, add the JavaScript file (before closing the body tag) for the custom controls to make them functional and done.

<!-- Audio Player JS -->
<script  src="js/player.js"></script>

That’s all! I hope this tutorial helped you to customize the HTML5 audio player with CSS. If you have any questions or need further help, let me know by comment below.

You May Also Like

2 thoughts on “Customize HTML5 Audio Player with CSS”

  1. I would like to play several audio files on one web page so I plan to embed several audio players on the page. It appears that with this code the audio source file is in the java code. How can put the audio source with the HTML players?
    Thanks.

    Reply
    • Hi John!
      You can assign the audio source in player JavaScript file, in the audio const:

      const audio = new Audio( "path/to/audio.mp3" );
      

      Unfortunately, this audio player doesn’t provide the way to render multiple audio players on a single page with different audio source. Anyhow, you need to call the whole script for each player.

Leave a Comment