javascript - 如果选择框是，则每 x 秒播放一次声音？

Question

如果选择框值 = 'x'，我想播放声音:

<script src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script src='https://cdn.rawgit.com/admsev/jquery-play-sound/master/jquery.playSound.js'></script>

<select name="additiveSport" id="additiveSport" class="form-control is-invalid" aria-describedby="additiveSport-error" aria-invalid="true">
                    <option value="-">Bitte auswählen...</option>
                    <option value="Fahrrad">Fahrrad</option>
                    <option value="Heimtrainer">Heimtrainer</option>
                    <option value="Spazieren">Spazieren</option>
                  </select>

<script>
$('#additiveSport').on('change', function() {
      if ( this.value == 'Heimtrainer')
      {
        $.playSound("http://www.noiseaddicts.com/samples_1w72b820/3724.mp3");
      }
      else
      {
        $.stopSound;
      }
});
</script>

这可行，但我想实现一个计时器功能，以便如果选择 Heimtrainer ，它会每 x 秒播放一次声音，而所有其他选择的它会停止声音。

非常感谢您的帮助。

Answer 1

更改 data-time 数值(以分钟为单位):

var loop;
$('#additiveSport').on('change', function() {

      var time = parseInt($(this).find(":selected").data("time")) * 1000;

      if ( this.value == 'Heimtrainer')
      {
        loop = setInterval(function(){$.playSound("http://www.noiseaddicts.com/samples_1w72b820/3724.mp3")}, time);
      }
      else
      {
        clearInterval(loop);
      }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/admsev/jquery-play-sound/master/jquery.playSound.js'></script>

<select name="additiveSport" id="additiveSport" class="form-control is-invalid" aria-describedby="additiveSport-error" aria-invalid="true">
  <option value="-" data-time="2">Bitte auswählen...</option>
  <option value="Fahrrad" data-time="1">Fahrrad</option>
  <option value="Heimtrainer" data-time="1">Heimtrainer</option>
  <option value="Spazieren" data-time="3">Spazieren</option>
</select>