Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to style html5 audio tag?

Tags:

html

audio

People also ask

How do I style an audio element in CSS?

Add the CSS Styles . audio-player { --player-button-width: 3em; --sound-button-width: 2em; --space: . 5em; ... } The --sound-button-width will be used for the width of the sound button, and --space will be used to add space between the track and the button.

How do I change the color of my audio tag?

Currently, you cannot change the color of the controls of the HTML5 audio tag. If you enable the controls attribute, the appearance of the 'play', 'pause', and 'volume' will be dependent on the browser.

Which of the following is true about audio tag in HTML5?

Q 2 - Which of the following is true about 'audio' tag in HTML5? A - HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document.


<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

REFERENCE: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F


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="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


Yes! The HTML5 audio tag with the "controls" attribute uses the browser's default player. You can customize it to your liking by not using the browser controls, but rolling your own controls and talking to the audio API via javascript.

Luckily, other people have already done this. My favorite player right now is jPlayer, it is very stylable and works great. Check it out.


The appearance of the tag is browser-dependent, but you can hide it, build your own interface and control the playback using Javascript.


some color tunings

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Ken had it right as well.

a css tag:

audio {

}

will get you some results. seems it doesnt want the player any height above or below 25px but the width can be shortened or lengthened to an extent.

this was good enough for me; see this example (warning, audio plays automatically): www.thenewyorkerdeliinc.com