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

Ваш ответ

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

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