What issues are disccused here:

• embedding audio player to an html page
• customizing audio player using css
• setup of audio player (with extra capabilities) using javascript

Is it impossible to customize audio tag (enable styles for a standart html audio player)?

As stated in MDN Web Docs:

You can style the default controls with properties that affect the block as a single unit…You can’t however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.)…

Which means that you can’t use only a default audio representaion if you need to:

• change forms and colors of control elements
• add custom control elements
• apply animations and other visual features to inner content of an audio block

How to create custom html audio block?

There are two functional parts:

• Html structure with control elements to use speacific features of an audio player. An html template of a needed player.
• Javascript functions to handle events of the control elements and use audio player capabilities via HTMLMediaElement Api.

Standart audio player

<audio controls>
<source src="/audio.mp3" type="audio/mp3">
   Your browser does not support the audio element.
</audio>

Html template of a custom audio player

Basically custom template uses standart player as its core, but audio block is not displayed.

<div class="player">
<audio id="av-tag" controls><source src="/audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<button class="play-btn">►</button>
<div class="play-time">1:00</div>
<input id="cur-time" type="range" min="0" max="10" step="0">
<div id="speaker">🔊</div>
<input id="volume" type="range" min="0" max="10">
</div>

Javascript HTMLMediaElement Api

document.addEventListener("DOMContentLoaded", (e)=> {

//dom objects of colntrol elements
          var av = document.getElementById("av-tag");
          var playTime = document.getElementsByClassName("play-time")[0];
          var playBtn=document.getElementsByClassName("play-btn")[0];
          var curTime=document.getElementById("cur-time");
          var volume = document.getElementById("volume");
          var speaker=document.getElementById("speaker");

//variable to check if player is playing or not
          var isPlaying = false;

          av.onloadedmetadata = function() {
            curTime.max=av.duration;
            };
            
//function of displaying current time
          av.ontimeupdate=function() {
            
              var sec_num = av.currentTime;
              var hours   = Math.floor(sec_num / 3600);
              var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
              var seconds = sec_num - (hours * 3600) - (minutes * 60);
              seconds=Math.round(seconds);

              if (hours < 10) {
                hours   = "0"+hours;
              }
              if (minutes < 10) {
                minutes = "0"+minutes;
              }
              if (seconds < 10) { seconds = "0"+seconds; } playTime.innerHTML = minutes+':'+seconds; 
              if(isPlaying) curTime.value=av.currentTime; 
         }; 
//function to control volume
         volume.onchange=function() { 

              av.volume = volume.value/10;
         }; 
//function to control playing time
         curTime.onchange=function() { 

              av.pause(); av.currentTime=curTime.value; av.play(); 
         }; 
//function to switch off or switch on volume by click on speacker
         speaker.onclick=function() { 
         
          if(volume.value==0) { 
             volume.value=10; av.volume=1;
          } else { 
             volume.value=0; av.volume=0;
          } }; 
//function to control play/pause and display play button symbol
         playBtn.addEventListener("click", (a)=> {

          if(isPlaying)
          {
            av.pause();
            isPlaying=false;
            playBtn.innerHTML="►";
          }
          else
          {
            av.play();
            isPlaying=true;
            playBtn.innerHTML="❚❚";
          }
          
        });


    });

CSS styles for audio player

.player * {
    display: inline-block;
    vertical-align: middle;
    background: none;
    border: none;
    font-size: x-large;
  }
  .player audio {
    display: none;
  }
  .player
  {
    border: 2px solid #600a6f;
    background: #e9defd;
    width: max-content;
    padding: 12px;
    border-radius: 20px;
  }
.player input[type="range"]
{
      -webkit-appearance: none;
    height: 5px;
    border-radius: 5px;
    background: white;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.player input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
#volume {
  width: 40px;
}