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 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).

2
  • А вопрос то в чем???? Или ты просто закинул бесплатный заказ и ждешь пока кто-то за тя сделает?
    – Air
    Commented 19 дек. 2021 в 4:48
  • @Air помочь написать код js либо если есть подобная библиотека ссылку на неё логично. Если там писать много JS, то ок я пойму и удалю вопрос :). Делаю для себя.
    – SineYlo
    Commented 19 дек. 2021 в 5:08

1 ответ 1

3

Если не требуется визуализация на основе реальных частот, а всего лишь декоративный элемент, то кода будет немного. При каждом запуске, 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>

5
  • 1
    Да, это то что нужно :). Спасибо!
    – SineYlo
    Commented 19 дек. 2021 в 5:54
  • 1
    Превратили SO в бесплатный фриланс....
    – Air
    Commented 19 дек. 2021 в 5:55
  • @Air: ну, на счёт меня - неправда. Это можно посмотреть в проверках - я злой в последнее время ;-)
    – UModeL
    Commented 19 дек. 2021 в 5:57
  • Шож тя так разозлило?)))
    – Air
    Commented 19 дек. 2021 в 6:01
  • 1
    @Air: "Беда нашего времени - невежды, лентяи и хамы."
    – UModeL
    Commented 19 дек. 2021 в 6:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.