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 10:47:05

• Related Questions & Answers
• HTML5 <audio> tag on Android for PhoneGap application
• HTML5 <audio> tag not working in Android Webview
• Is it possible to add HTML5 validation to Visual Studio?
• HTML5 check if audio is playing
• HTML5 Audio to Play Randomly
• How to play HTML5 Audio Randomly
• HTML5 audio control stop button
• How to detect HTML5 audio MP3 support
• Is it possible to validate the size and type of input=file in HTML5?
• HTML5 audio not playing in PhoneGap App
• <radialGradient> HTML5 tag
• Why to use canvas tag in HTML5?
• Is it possible to use MongoDB capped collection?
• Is it possible to control Matplotlib marker orientation?
• Is it possible to use pyplot without DISPLAY?