.audioBarContainer{
  display: none;
  /*flex*/
  position: absolute;
  top:520px;
  left:50px;
  justify-content: space-between;
  height: 64px;
  --boxSize: 8px;
  --gutter: 4px;
  width: calc((var(--boxSize) + var(--gutter)) * 5);
}

.audioBarBox{
  transform: scaleY(.4);
  height: 100%;
  width: var(--boxSize);
  background: #15759b;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  border-radius: 8px;
}

.audioBarBox1{
  animation-name: audioBarBoxQuiet;
}

.audioBarBox2{
  animation-name: audioBarBoxNormal;
}

.audioBarBox3{
  animation-name: audioBarBoxQuiet;
}

.audioBarBox4{
  animation-name: audioBarBoxLoud;
}

.audioBarBox5{
  animation-name: audioBarBoxQuiet;
}

.audioPause, .audioPlay, .audioNext, .audioBack{
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.audioPlay{
    display: block;
    left:40px;
    background-image: url("/assets/images/audio_play.png");
}

.audioPause{
    display: none;
    left:40px;
    background-image: url("/assets/images/audio_pause.png");

}

.audioNext{
    left:80px;
    background-image: url("/assets/images/audio_next.png");
}

.audioBack{
    background-image: url("/assets/images/audio_next.png");
    transform: rotate(180deg);
}

.audioControlWrap{
    display: none;
    position: absolute;
    top:540px;
    left:140px;
    width:210px;
}

@keyframes audioBarBoxQuiet {
  25%{
    transform: scaleY(.6);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(.8);
  }
}

@keyframes audioBarBoxNormal {
  25%{
    transform: scaleY(1);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(.6);
  }
}

@keyframes audioBarBoxLoud {
  25%{
    transform: scaleY(1);
  }
  50%{
    transform: scaleY(.4);
  }
  75%{
    transform: scaleY(1.2);
  }
}