html5 audio player style css | Style your Audio player with css

Html5 CSS audio player style

The CSS audio player style, This is a simple HTML and CSS audio player style you can use it for website.

HTML audio player code

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Use the CSS style for making the player give a different style

audio:active,audio:focus,audio:hover{-webkit-box-shadow:15px 15px 20px rgba(0,0,0,.4);-moz-box-shadow:15px 15px 20px rgba(0,0,0,.4);box-shadow:15px 15px 20px rgba(0,0,0,.4);-webkit-transform:scale(1.05);-moz-transform:scale(1.05);transform:scale(1.05)}audio{-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear;-moz-box-shadow:2px 2px 4px 0 #006773;-webkit-box-shadow:2px 2px 4px 0 #006773;box-shadow:2px 2px 4px 0 #006773;-moz-border-radius:7px 7px 7px 7px;-webkit-border-radius:7px 7px 7px 7px;border-radius:7px 7px 7px 7px}

And done 😋

Congratulations your Audio player is ready with a different style.