Кастомный audio-плеер

Question

Есть вот такой код:

<button class="audio-player" type="button">
  <svg class="audio-player__icon" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.625 18.75H1.875V41.25H5.625V18.75Z" fill="white"/>
    <path d="M47.8125 18.75H44.0625V41.25H47.8125V18.75Z" fill="white"/>
    <path d="M15.9375 10.3125H12.1875V48.75H15.9375V10.3125Z" fill="white"/>
    <path d="M37.5 11.25H33.75V48.75H37.5V11.25Z" fill="white"/>
    <path d="M58.125 11.25H54.375V48.75H58.125V11.25Z" fill="white"/>
    <path d="M26.25 1.875H22.5V58.125H26.25V1.875Z" fill="white"/>
  </svg>
  <span class="audio-player__text">On</span>
</button>

Суть такая, что по нажатию на кнопку audio-player, должен меняться текст on/off, а также должен прыгать при воспроизведении audio хотя бы просто хаотично анализатор спектра (т.е. svg линии - audio-player__icon).

Answer 1

Если не требуется визуализация на основе реальных частот, а всего лишь декоративный элемент, то кода будет немного. При каждом запуске, animation-duration и animation-delay для каждой полоски устанавливается случайным образом, что практически исключает повторы:

let btn = document.querySelector('.audio-player');
let btnTxt = document.querySelector('.audio-player__text');

btn.addEventListener('click', function () {
  let active = this.classList.contains('active');
  this.classList.toggle('active', !active);
  this.querySelector('.audio-player__text').textContent = !active ? 'On' : 'Off';
  [...this.querySelectorAll('.audio-player__icon path')].forEach((el) => {
    el.style.animation = !active ? `peak ${Math.random() * 100 + 400}ms cubic-bezier(.25,1.02,.36,.27) ${Math.random() * 200}ms infinite` : '';
  });
});

.audio-player {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

.audio-player__text {
  font: bold 22px/1em sans-serif;
  color: #fff;
}

.audio-player__icon path {
  transform-origin: center center;
  transform: scaleY(.01);
}

@keyframes peak { 50% { transform: scaleY(1); } }

<button class="audio-player" type="button">
  <svg class="audio-player__icon" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.625,1.875h-3.75v56.25h3.75v-56.25z"   fill="red"/>
    <path d="M15.9375,1.875h-3.75v56.25h3.75v-56.25z" fill="orange"/>
    <path d="M26.25,1.875h-3.75v56.25h3.75v-56.25z"   fill="yellow"/>
    <path d="M37.5,1.875h-3.75v56.25h3.75v-56.25z"    fill="lime"/>
    <path d="M47.8125,1.875h-3.75v56.25h3.75v-56.25z" fill="cyan"/>
    <path d="M58.125,1.875h-3.75v56.25h3.75v-56.25z"  fill="blue"/>
  </svg>
  <span class="audio-player__text">Off</span>
</button>

БЛОГ НА HUSL

Кастомный audio-плеер

Ответы (1 шт):