Is it possible to style HTML5 audio tag?


HTML 5 audio tags can be styled. By using the audio tag with “controls” attribute, the default browsers player is used. You can customize by not using the browsers controls. 

By removing the controls attribute, you can hide the built in browser user’s interface −

<audioid = "player" src = "kalimba.mp3"></audio>
<div>
   <buttononclick = "document.getElementById('player').play()">Play</button>
   <buttononclick = "document.getElementById('player').pause()">Pause</button>
   <buttononclick = "document.getElementById('player').volume += 0.2">Vol+</button>
   <buttononclick = "document.getElementById('player').volume -= 0.2">Vol-</button>
</div>

You can also add CSS classes to each one of the elements and style them accordingly.

Updated on: 04-Mar-2020

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements