Как остановить анимацию кейфрейма и запустить по нажатию на кнопку? Через 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>