Audio controls provided by browsers are often ugly. We can completely redesign the experience by wrapping our own UI around the HTML5 <audio> element.

Animated Waveform

Instead of static bars, we can use CSS animations to simulate music playing when the player is active.

.bar {
  width: 4px;
  background: #04AA6D;
  border-radius: 2px;
  animation: equalize 1s infinite alternate;
}
.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }

@keyframes equalize {
  0% { height: 10px; }
  100% { height: 30px; }
}

Check out the Live Demo to interact with the volume controls and play/pause functionality buttons!