0

I have created this script in JS that when a button is pressed, an audio file is played repeatedly. For context, the audio file is some 'beep' and is used as sort of an alarm. The speed at which the beep must be played is depending on a setting which can be found on a page called 'sound.php'.

Now this script is working partly. Whenever the sound-producing page is loaded up, and the 'Play' button is pressed, the beeping starts and it is audible at the correct frequency.

However, when the time interval on sound.php is changed in real time, the frequency of the beeping does not change with it.

I believe that the script as it is now, will retrieve the interval from sound.php every 1000ms but something is not right and I cannot get it to work.

$(document).ready(function () {
    ajax_call = function() {
        $.ajax({
            type: "GET",
            url: "sound.php",
            dataType: "html",              
            success: function (response) {
                soundValue = response;
            }
        });
    };
    var interval = 1000; //refresh every second
    setInterval(ajax_call, interval);
});
    
function play() {
  const intervalTime = soundValue; // Interval time in milliseconds
  const interval = setInterval(function() {
    var audio = new Audio('beep.mp3');
    audio.play();
  }, intervalTime);
  
  setTimeout(function() {
    clearInterval(interval);
  }, 900000);
}

What am I missing here? Small thing or a major flaw that I'm not overseeing? Any help is much appreciated.

Nour
  • 143
  • 1
  • 15

1 Answers1

1

You need to check whether soundValue has changed. If it has, clear the interval timer and start another one.

let lastSoundValue;

function play() {
  let playInterval;
  let killTimer;

  playInterval = setInterval(function() {
    if (lastSoundValue !== soundValue) {
      clearInterval(playInterval);
      clearTimeout(killTimer);
      lastSoundValue = soundValue;
      play();
    } else {
      var audio = new Audio('beep.mp3');
      audio.play();
    }
  }, soundValue);
  killTimer = setTimeout(function() {
    clearInterval(playInterval);
  }, 900000);
}
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Thank you for your answer. I have amended my code with the tip above, yet I still get the same result. Any other options? – Nour Apr 09 '23 at 21:23
  • 1
    Are you pressing the Play button again to restart the sound? This function is only called when you press the button. – Barmar Apr 09 '23 at 21:27
  • No, I was not aware that that is necessary. My intention is to only have it pressed once, and after that, it will just play the beep and update 'in real time' if that makes sense. – Nour Apr 09 '23 at 21:29
  • 1
    I've updated the answer. Not it checks `soundValue` in the interval timer and restarts itself. – Barmar Apr 09 '23 at 21:44
  • Thank you for your reply. When hitting the button now, I hear no sound at all. Also, how is the sound loaded if (lastSoundValue !== soundValue) is true? Because the source is now only stated in the 'else' statement. Thanks again for your time. – Nour Apr 09 '23 at 22:53
  • 1
    I had an extra `lastSoundValue = soundValue` left over from the earlier version. – Barmar Apr 09 '23 at 22:56
  • 1
    Sorry, `lastSoundValue` needed to be a global variable. During my work I had tried to use a nested function, but that didn't work and I forgot to move the variable out. – Barmar Apr 09 '23 at 22:57
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/253069/discussion-between-nour-and-barmar). – Nour Apr 09 '23 at 23:02