Is it possible to style html5 audio tag?

by

Yes: you can hide the built-in browser UI (by removing the controls attribute from audio) and instead build your own interface and control the playback using Javascript (source):

<audio id="player" src="https://stackoverflow.com/questions/4126708/vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

You can then style the elements however you wish using CSS.

MDN HTMLAudioElement API reference

More Related Contents:

  1. How to stream audio/video files such as MP3, MP4, AVI, etc using a Servlet
  2. Audio Tag Autoplay Not working in mobile
  3. Play audio local file with html
  4. HTML5 audio not working on Firefox
  5. How can I get the html5 audio’s duration time
  6. HTML embed autoplay=”false”, but still plays automatically
  7. Send custom HTTP request header with HTML5 audio tag
  8. Decrease bitrate on WAV file created with recorderjs
  9. Autoplay audio on mobile safari
  10. Vertically center two elements within a div [duplicate]
  11. How to keep origin in center of image in scale animation?
  12. How do I encode/decode HTML entities in Ruby?
  13. Should I embed images as data/base64 in CSS or HTML
  14. Fixed header table with horizontal scrollbar and vertical scrollbar on
  15. How to get box-shadow on left & right sides only
  16. Why can’t radio buttons be “readonly”?
  17. Creating a favicon [closed]
  18. Add padding at the beginning and end of each line of text
  19. CSS: Vertically align div when no fixed size of the div is known
  20. Flex item should align left, not center, when it wraps
  21. Exclude menu item from the collapse of bootstrap 3 navbar
  22. Preload multiple audio files
  23. Text Padding in Select Boxes
  24. CSS border color switch animation: “from” color not correct
  25. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  26. Pixelated edge around a CSS Circle with overflow: hidden;
  27. HTML : Is there any way to show images in a textarea?
  28. How to change font-family of drop down’s list item?
  29. How to remove x and y on submit in HTML form with Image type button?
  30. Why use HTML5 tags? [duplicate]

Leave a Comment