I'm currently working on a music loader feature and I'm trying to create a toggle switch to pause and play the music. So far, I've been struggling with this functionality but managed to get it partially working on a simpler project, which you can find here:
http://codepen.io/TheAndersMan/pen/MjMrje
Here is the link to the project I'm trying to make it work for:
http://codepen.io/TheAndersMan/pen/qazVGX
Below is the snippet of my code:
HTML:
<button class="toggle">Pause</button>
<div class="music">
<div class="barOne bar"></div>
<div class="barTwo bar"></div>
<div class="barThree bar"></div>
</div>
SCSS:
body {
overflow: hidden;
}
.toggle {
font-family: roboto;
background: #3f51b5;
border: none;
font-size: 3em;
color: white;
border-radius: 3px;
margin: 0 auto;
display: block;
cursor: pointer;
outline: none;
}
.music {
width: 20vw;
display: flex;
margin: 30vh auto;
.bar {
width: calc(20vw / 3);
background: #ff5252;
height: 15vw;
margin-left: .5vw;
}
.barOne {
height: 10vw;
margin-top: 5vw;
animation: barOne 0.75s linear infinite;
}
.barTwo {
height: 18vw;
margin-top: -3vw;
animation: barTwo 1s linear infinite;
}
.barThree {
height: 14vw;
margin-top: 1vw;
animation: barThree 0.75s linear infinite;
}
}
@keyframes barOne {
0% {
height: 10vw;
margin-top: 5vw;
}
50% {
height: 7.5vw;
margin-top: 7.5vw;
}
100% {
height: 10vw;
margin-top: 5vw;
}
}
@keyframes barTwo {
0% {
height: 18vw;
margin-top: -3vw;
}
50% {
height: 10vw;
margin-top: 5vw;
}
100% {
height: 18vw;
margin-top: -3vw;
}
}
@keyframes barThree {
0% {
height: 14vw;
margin-top: 1vw;
}
50% {
height: 20vw;
margin-top: -5vw;
}
100% {
height: 14vw;
margin-top: 1vw;
}
}
.paused {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
JS:
var state = true;
document.querySelector(".toggle").addEventListener("click", function() {
var toggle = document.querySelector(".toggle");
var one = document.querySelector(".barOne");
var two = document.querySelector(".barTwo");
var three = document.querySelector(".barThree");
if (state === true) {
state = false;
toggle.innerHTML = "Play"
one.classList.add("paused");
// one.style.animation = "none"
two.classList.add("paused");
three.classList.add("paused");
}
else {
state = true;
toggle.innerHTML = "Pause"
one.classList.remove("paused");
two.classList.remove("paused");
three.classList.remove("paused");
}
});
It's a lot of information, but I wanted to provide a complete understanding. Thank you in advance!