I’ve code to set an animation loop within CSS tied to a variable.

This worth can also be hooked up to an mp3 file that’s purported to ping on every nth interval.

The animation works completely tremendous, however the audio observe is ready with a set interval perform and continues to play even once I name clearinterval. Additionally subsequent settings get all out of whack and do not comply with any kind of sequence.

If I set the timing as soon as, every little thing is nice. Its once I need to reset it or change the interval that’s inflicting issues.

/********************************* */
var r = doc.querySelector(':root');
var rs = getComputedStyle(r);
var interval = rs.getPropertyValue('--interval');

var quantity = doc.getElementById('quantity');
var spinner = doc.getElementById('spin');
var reset = doc.getElementById('resetButton');

var playAudio = true;
perform interval_set() {
  r.type.setProperty('--interval', quantity.worth + 's');
  spinner.classList.add('spinAnim');
  playSound();
}
var audioOptions = doc.getElementById('audioOptions');
var audioButton = doc.getElementById('audioButton');

var audio = new Audio('https://www.soundjay.com/misc/small-bell-ring-01a.mp3');

perform playSound() {
  $('spinner').information(
    'interval',
    setInterval(perform () {
      audio.play();
    }, quantity.worth * 1000)
  );
}

resetButton.addEventListener('click on', perform (e) {
  e.preventDefault();
  doc.getElementById('spin').classList.take away('spinAnim');
  doc.getElementById('quantity').worth = 0;
  clearInterval($('spinner').information('interval'));
});

audioOptions.addEventListener('change', perform (e) {
  e.preventDefault();
  doc.getElementById('audioButton').classList.take away('disabled');
  audio.cease();
});
:root {
  --interval: 20s;
}
html,
physique,
.container {
  top: 100%;
}
physique {
  background-color: rgb(43, 63, 92);
  shade: #fff;
  text-align: heart;
}
.container {
  show: -webkit-flexbox;
  show: -ms-flexbox;
  show: -webkit-flex;
  show: flex;
  -webkit-flex-align: heart;
  -ms-flex-align: heart;
  -webkit-align-items: heart;
  align-items: heart;
  justify-content: heart;
  flex-direction: row;
}
.innercontainer {
  show: -webkit-flexbox;
  show: -ms-flexbox;
  show: -webkit-flex;
  show: flex;
  -webkit-flex-align: heart;
  -ms-flex-align: heart;
  -webkit-align-items: heart;
  align-items: heart;
  justify-content: heart;
  flex-direction: row;
}
h1 {
  font: 1.5em 'Roboto', sans-serif;
  margin-bottom: 30px;
}
.spin {
  width: 400px;
  top: 400px;
  border: 15px stable white;
  border-radius: 50%;
  border-top-color: rgb(255, 219, 82);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.spinAnim {
  animation: spin var(--interval) ease-in-out infinite;
  -webkit-animation: spin var(--interval) ease-in-out infinite;
}
.timer {
  font: 3em 'Roboto', sans-serif;
  margin-bottom: 30px;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.container {
  show: flex;
}
.purple {
  show: flex;
  flex-direction: column;
}
.inexperienced {
}
.blue {
}
.container div {
  font-size: 1vw;
  padding: 3em;
  shade: white;
  flex: 1;
}
<!DOCTYPE html>
<html>
  <hyperlink href="https://cdn.jsdelivr.internet/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="nameless">
  <script src="https://cdn.jsdelivr.internet/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="nameless"></script>
  <hyperlink rel="stylesheet" href="type.css" />
  <head>
    <meta charset="utf-8" />
    <title>About time...</title>
  </head>
  <physique>
    <div class="container">
      <div class="purple">
        <kind class="row g-3">
          <div class="col-auto">
            <enter sort="checkbox" class="btn-check" id="btn-check" autocomplete="off">
            <choose id="audioOptions" class="form-select form-select-lg">
              <possibility worth="1">Bell</possibility>
              <possibility worth="2">Gentle metallic in a can</possibility>
              <possibility worth="3">Exhausting metallic in a can</possibility>
            </choose>
            
            <enter sort="quantity" class="form-control form-control-lg form-select-lg kind" id="quantity" placeholder="Time">
            <button sort="button" id="intervalButton" onclick="interval_set()" class="m-2 btn btn-outline-warning btn-lg">Begin</button>
            <button sort="button" id="resetButton" onclick="playSound()" class="btn btn-outline-danger btn-lg">Reset</button>
          </div>
        </kind>
</div>
      <div class="inexperienced">    
        <span class="timer" id="minutes">00</span>
        <span class="timer" id="colon">:</span>
        <span class="timer" id="seconds">00</span>
        <div id="spin" class="spin">       
      </div> 
      </div>
      <div class="blue">    

    </div>
    </div>

  </physique>
  <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="nameless"></script>

  <script src="logic.js"></script>
</html>

2