0

Как остановить анимацию кейфрейма и запустить по нажатию на кнопку? Через animation-play-state: paused;не выходит. Может как-то через js менять продолжительность анимации на 0 секунд? Ещё почему-то автоплей не работает, тоже не могу понять почему.

let audio = document.querySelector('audio')
audio.volume = 0.75
audio.play
document.querySelector('button').addEventListener('click', () => {

  audio.paused
    ? audio.play()
    : audio.pause()
})
.Music-button {
     background-color: transperent;
     width: 3.378em;
     height: 2.5em;
     font-size: 20px;
}
 .Music span {
     animation: audio-wave 1.5s infinite ease-in-out;
     background: #9b59b6;
     bottom: calc(50% - 0.313em);
     position: absolute;
     display: block;
     height: 0.313em;
     width: 0.563em;
}
 .Music span:nth-child(2) {
     left: 0.688em;
     animation-delay: 0.2s;
}
 .Music span:nth-child(3) {
     left: 1.376em;
     animation-delay: 0.4s;
}
 .Music span:nth-child(4) {
     left: 2.064em;
     animation-delay: 0.6s;
}
 .Music span:nth-child(5) {
     left: 2.752em;
     animation-delay: 0.8s;
}
 @keyframes audio-wave {
     0% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
     25% {
         height: 2.5em;
         transform: translateY(1.25em);
         background: #3498db;
    }
     50% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
     100% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
}
 .Music-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: 0;
     outline: 0;
     padding: 0;
}

 .Music-button {
     cursor: pointer;
     display: inline-block;
     transform: scale(1);
     transition-duration: 0.2s;
     transition-property: transform;
     transition-timing-function: ease;
}
 .Music-button:active {
     transform: scale(0.9);
}
<div class="Music">
  <button type="button" class="Music-button">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>
 <audio autoplay="autoplay">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

1 ответ 1

1

Через animation-play-state: paused вполне себе решается задача: задаёте это свойство спанам с классом paused и по клику добавляете/удаляете этот класс

let audio = document.querySelector('audio')
let span = document.querySelectorAll('span')
audio.volume = 0.75
audio.play
document.querySelector('button').addEventListener('click', () => {
  for (let element of span) {
    element.classList.toggle('paused');
  }
  audio.paused
    ? audio.play()
    : audio.pause()
})
.Music-button {
     background-color: transperent;
     width: 3.378em;
     height: 2.5em;
     font-size: 20px;
}
 .Music span {
     animation: audio-wave 1.5s infinite ease-in-out;
     background: #9b59b6;
     bottom: calc(50% - 0.313em);
     position: absolute;
     display: block;
     height: 0.313em;
     width: 0.563em;
}
.Music span.paused {
  animation-play-state: paused;
}
 .Music span:nth-child(2) {
     left: 0.688em;
     animation-delay: 0.2s;
}
 .Music span:nth-child(3) {
     left: 1.376em;
     animation-delay: 0.4s;
}
 .Music span:nth-child(4) {
     left: 2.064em;
     animation-delay: 0.6s;
}
 .Music span:nth-child(5) {
     left: 2.752em;
     animation-delay: 0.8s;
}
 @keyframes audio-wave {
     0% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
     25% {
         height: 2.5em;
         transform: translateY(1.25em);
         background: #3498db;
    }
     50% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
     100% {
         height: 0.313em;
         transform: translateY(0px);
         background: #9b59b6;
    }
}
 .Music-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     border: 0;
     outline: 0;
     padding: 0;
}

 .Music-button {
     cursor: pointer;
     display: inline-block;
     transform: scale(1);
     transition-duration: 0.2s;
     transition-property: transform;
     transition-timing-function: ease;
}
 .Music-button:active {
     transform: scale(0.9);
}
<div class="Music">
  <button type="button" class="Music-button">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>
 <audio autoplay="autoplay">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/ogg">
  <source src="https://raw.githubusercontent.com/zadvorsky/three.bas/master/examples/_audio/song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

4
  • Видимо я неправильно пытался реализовать. А почему autoplay не работает - не подскажите?
    – nonniks
    20 сен 2022 в 11:28
  • @nonniks, вот тоже не понимаю. У меня в Мозилле работает, в Опере - нет. А в Хроме сперва работал, но потом перестал.
    – Danila
    20 сен 2022 в 11:54
  • Поставил фаерфокс, там блокируется автовоспроизведение, пока не дашь разрешение. Может и в других браузерах такое. Есть какой-то метод костылём воспроизвести через js может?
    – nonniks
    20 сен 2022 в 12:09
  • @nonniks, да, пишут, что это политика всех браузеров, они блокируют автоплей. Вот нагуглил вариант с "костылями", попробуйте, может получится
    – Danila
    20 сен 2022 в 12:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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