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.

Varma

Published on 20-Mar-2018 15:17:05