How to Style Html5 Audio Tag

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.

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.

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.

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.

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:

Player example

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>

Change the control colors in the HTML5 audio tag

Answer: No. 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.

With more work though, you can use JavaScript to create your own audio player interface that connects to the audio element's API.

Your question is a more focused version of what was asked here:

Is it possible to style html5 audio tag?

And here are some articles on how to create a unique audio player:

http://serversideup.net/style-the-html-5-audio-element/

http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081

html 5 audio tag width

Set it the same way you'd set the width of any other HTML element, with CSS:

audio { width: 200px; }

Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.

How to Style Html5 Audio Tag

Is it possible to style html5 audio tag?

HTML5 Audio styling

Style html5 audio player

Custom CSS for audio tag?

How can I style the audio tag with javascript?

Understanding JavaScript for audio tag.

Methods:

Properties:

Using event listeners.

Change the control colors in the HTML5 audio tag

html 5 audio tag width

Related Topics

Leave a reply