Стилизация аудиоплеера для веб-страниц

/ 4 ноября, 2020/ Programming

Какие темы затрагиваются:

  • Установка аудиоплеера в веб-страницу
  • Стилизация аудиоплеера с использованием 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;
}
Поделиться этой записью