Про які речі йдеться мова:

  • Встановлення аудіовідтворювача у веб-сторінку
  • Стилізація аудіовідтворювача використовуючи css
  • Налаштування аудіовідтворювача (з додатковими можливостями) використовуючи javascript

Чи можливо застосувати стилі audio тега (стандартного аудіовідтворювача)?

Як зазначено у 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.)…

Це означає, що недостатньо використовувати тільки стандартну аудіорепрезентацію, якщо ви переслідуєте наступні цілі:

  • міняти форму та колір елементів плеєра (плей, пауза тощо)
  • додавати кастомні елементи плеєра
  • викорстовувати анімації та інші засоби стилізації для внутрішніх елементів плеєра

Як створити кастомний аудіоплеєр?

Кастомний аудіоплеєр складається з двох функціональних частин:

  • Html структура з елементами контролю та використовування специфічних можливостей audio. Html темплейт потрібного плеєра.
  • Javascript функції для відстеження подій елементів контролю та використання функціоналу стандартного (дефолтного) аудіовідтворювача через HTMLMediaElement Api.

Стандартний аудіовідтворювач

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

Html темплейт кастомного плеєра

По суті кастомний темплейт використовує стандартний плеєр в основі, але не показує його.

<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>
1:00
🔊

Javascript HTMLMediaElement Api

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

//dom об'єкти елементів контролю
          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");

//змінна для того, щоб відстежувати чи відбувається відтворення звуку
          var isPlaying = false;

          av.onloadedmetadata = function() {
            curTime.max=av.duration;
            };
            
//функція виведення поточного часу відтворення
          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; 
         }; 
//функція для встановлення гучності
         volume.onchange=function() { 

              av.volume = volume.value/10;
         }; 
//функція для встановлення початку відтворення
         curTime.onchange=function() { 

              av.pause(); av.currentTime=curTime.value; av.play(); 
         }; 
//функція для вімк/вивмк гучності
         speaker.onclick=function() { 
         
          if(volume.value==0) { 
             volume.value=10; av.volume=1;
          } else { 
             volume.value=0; av.volume=0;
          } }; 
//функція для play/pause та зображення кнопки відтворення
         playBtn.addEventListener("click", (a)=> {

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


    });

CSS стилі для аудіовідтворювача

.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;
}
Share this Post