CSS Style <Audio>

Is it possible to style html5 audio tag?

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.

HTML audio controls - How to remove 3 dots from default audio player?

Add this controlsList: noplaybackrate

<audio id="myaudio" controls controlsList="nodownload noplaybackrate">  
  <source src="horse.mp3" type="audio/mpeg">
</audio>

HTML5 Audio styling

Unfortunately not in a cross browser solution as they are built natively. There are a lot of -webkit- based psuedo elements that you can target for styling but those only work on webkit based browsers (eg: This won't work on Firefox/IE/Edge). However, you can utilize the audio API and there is a good answer on this duplicate SO question about using the JW Player which is a wrapper around this API and gives you styling control.

Simply using the audio/audio tag and want it to be customized in mobile platforms

You could remove the controls for the <audio> element and add manually your own customized controls to control the audio element.

That is removing the controls attribute and adding links and buttons and associate javascript functionality to manage (play/stop/progress...) the audio

Here is some about declaring the <audio>element https://www.w3schools.com/tags/tag_audio.asp

And this answers shows you a little example how to do it https://stackoverflow.com/a/7639343/4635829

Styles applied to audio element work in firefox and safari, but not in chrome

There are two issues, first - a thumb on a volume slider is not visible on Firefox, but it's shown as a blue dot on Chrome, second - white progress bar is shown on Firefox, but not on Chrome.

Both Chrome and Firefox codepens show a white progress bar, but no volume slider.

Your #volume-slider css styling hides the whole element's styling. Change it to:

#volume-slider {
  opacity: 1; /* now styling is visible */
  
  position: relative;
  z-index: 10;
  transform: scaleY(5.5);
}

You can now play around with the slider styling, but don't forget to remove webkit styling:

#volume-slider-squish > input[type="range"]::-webkit-slider-thumb {
  height: 6px;
  width: 28px;
  -webkit-appearance: none; /* remove webkit styling */
          appearance: none; /* remove webkit styling */
  background-color: #fff;
  border-radius: 8px;
  margin-top: -1px;
  transform: scale(1);
  opacity: 1;
}  

Do this for hover and active as well.

Custom CSS for audio tag?

There is not currently any way to style HTML5 <audio> players using CSS. Instead, you can leave off the control attribute, and implement your own controls using Javascript. If you don't want to implement them all on your own, I'd recommend using an existing themeable HTML5 audio player, such as jPlayer.

Style html5 audio player

border-radius: 0px works perfectly in Firefox.

But it seems not effective in chrome. Use below to somewhat reduce the radius.

#player{
background-color: #f1f3f4;
}

I mean change the background same as player background.

How can I style the audio tag with javascript?

You can not style the audio tag directly.

As I saw your code, I have it clear that you know it already. But the issue is that you need to code the JavaScript part to make it work.

Understanding JavaScript for audio tag.

When you have an HTML audio tag like this:

<audio src="your_audio.mp3"></audio>

You can reference it in your code like this:

let audio = document.querySelector("audio");

And with this, in your audio variable, you can access pretty much to every control in the audio tag. Some of them and that I think you may need are:

Methods:

• play() To play the loaded audio.
• pause() To pause the loaded audio.

Properties:

• currentTime The time value (between 0 and 1) of the playing media.
• volume The actual volume of the audio. (Value between 0 and 1)
• duration The duration of the audio.
  

Using event listeners.

One of the most common uses of JavaScript is exactly that, event listeners. This helps your application with handling what happens on the browser (button clicks, mouse move, window resize, etc), so this will be a lot useful to create your own player and handle this events to update the real audio tag.

Based on your example of this player:

You can see a working example of a player with a similar style of your desire. Hope it helps.

Player:

var audio = document.querySelector("audio"),    playButton = document.querySelector("#audio-play"),    progress = document.querySelector("#audio-playbar"),    volumeRange = document.querySelector("#volume-range");
const play = () =>{  if(audio.paused){    console.log("play");    playButton.classList.add("paused");    audio.play();  }else{    console.log("pause");    playButton.classList.remove("paused");    audio.pause();  }};
const bwd = () =>{  console.log("bwd");  audio.currentTime = 0;};
const fwd = () =>{  console.log("fwd");  audio.currentTime += 5;};

volumeRange.addEventListener("change",(event)=>{  audio.volume = event.target.value / 100;});
audio.addEventListener("timeupdate",(e)=>{progress.value = (e.target.currentTime / e.target.duration) * 100;if(e.target.currentTime/e.target.duration === 1){  play();  audio.currentTime = 0;}});
document.querySelector("#audio-mute").addEventListener("mouseenter",(event)=>{  document.querySelector("#volume-control")    .style = "display: block;";});
document.querySelector("#volume-control").addEventListener("mouseleave",(event)=>{  document.querySelector("#volume-control")    .style = "display: none;";});

playButton.addEventListener("click",play);
document.querySelector("#audio-fwd")  .addEventListener("click",fwd);
document.querySelector("#audio-bwd")  .addEventListener("click",bwd);

#audio-player{  background: #005bab;  width: 300px;  height: 40px;  border-radius: 15px;  position: relative;}
#audio-player::after{  content: "";  background: url('https://i.imgur.com/aDz7QOn.png') no-repeat;  display: block;  position: absolute;  width: 100vw;  height: 100vh;  margin-top: -8px;  margin-left: 270px;}

#audio-play{  width: 20px;  height: 20px;  background: url('https://i.imgur.com/pOdMApr.png') no-repeat;  background-size: cover;  position: absolute;  margin: 10px;  margin-left: 15px;  cursor: pointer !important;}

#audio-bwd{  width: 25px;  height: 15px;  background: url('https://i.imgur.com/z4j9Qp9.png') no-repeat;  background-size: cover;  position: absolute;  margin: 12px;  margin-left: 45px;  cursor: pointer !important;}
#audio-fwd{  width: 25px;  height: 15px;  background: url('https://i.imgur.com/E7X60LH.png') no-repeat;  background-size: cover;  position: absolute;  margin: 12px;  margin-left: 75px;  cursor: pointer !important;}

#progress{  position: absolute;  margin: 8px;  margin-left: 105px;}

#audio-playbar{  border-radius: 0;  background: black;  height: 10px;}
progress[value]::-webkit-progress-bar {  background-color: #000;  border-radius: 0;}
progress[value]::-webkit-progress-value{  background: #c0c0c0;}

.paused{  background: url('https://i.imgur.com/EwMhtwR.png') no-repeat !important;  background-size: cover;}
#audio-mute{  width: 26px;  height: 26px;  position: absolute;  margin: 11px;  z-index: 11;  margin-left: 278px;  background: url('https://i.imgur.com/g3W1tUI.png') no-repeat;}

#volume-control{  position: absolute;  margin-left: 230px;  display: none;  z-index: 12;}

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg">  Your browser does not support the <code>audio</code> element.</audio>
<div id="audio-player">  <div id="controls">    <span id="audio-play"></span>    <span id="audio-bwd"></span>    <span id="audio-fwd"></span>  </div>  <div id="progress">    <progress id="audio-playbar" max="100" value="60"></progress>  </div>  <div id="mute">    <span id="audio-mute"></span>    <span id="volume-control">    <input id="volume-range" type="range" min="0" max="100">    </span>  </div></div>

---

Related Topics