JavaScript program that plays an audio file at a certain time, doesn't seem to work

Question

I'm a novice at JavaScript so I just pulled a script off the internet and tweaked it to where at a certain time it would play an audio file (along with its original purpose as an HTML clock down to the millisecond), so that I can time the beat drop to 00:00 AM:

Number.prototype.pad = function(n) {
  for (var r = this.toString(); r.length < n; r = 0 + r);
  return r;
};

function updateClock() {
  var now = new Date();
  //start my code
  var hasPlayed = false;
  //end my code
  var milli = now.getMilliseconds(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hou = now.getHours(),
    mo = now.getMonth(),
    dy = now.getDate(),
    yr = now.getFullYear();
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var tags = ["mon", "d", "y", "h", "m", "s", "mi"],
    corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli];
  for (var i = 0; i < tags.length; i++)
    document.getElementById(tags[i]).firstChild.nodeValue = corr[i];

  //start my code
  if (hasPlayed == false && min == 57 && sec == 13 && milli >= 700) {
    hasPlayed = true;
    var song = new Audio('song.mp3');
    song.play();
  } else {
    hasPlayed = false;
  }
  //end my code
    
}

function initClock() {
  updateClock();
  window.setInterval("updateClock()", 1);
}

My intention was that when a certain time was reached, it would create a new Audio() that had song.mp3 and would play it, with the boolean hasPlayed as to prevent the clock from repeatedly spamming the song.

I feel like I have the basic idea down, but the execution is borked. I feel like I'm applying to Java logic to JavaScript even though I know the two are completely different things.

Answer 1

with its original purpose as an HTML clock down to the millisecond

Well, that isn't possible anyway. Nobody has a screen that updates at 1,000 Hz. 60 Hz is typical. You should use requestAnimationFrame() instead.

window.setInterval("updateClock()", 1);

This interval will definitely not fire every millisecond.

My intention was that when a certain time was reached, it would create a new Audio() that had song.mp3 and would play it

You'll need to create new Audio() early, such as when you load your page in the first place. That way, the browser has time to buffer the audio.

If your audio clip is relatively short (less than a minute or two), and if you want to have better timing, you can use the Web Audio API and an AudioBufferSourceNode . This will allow you to fetch the audio data ahead of time (via the Fetch API or whatever you like), then decode it to PCM in memory, and enqueue it to start at a specific time. The downside here is that the file has to be totally loaded before you can do this, as the whole decoded audio sits in memory before it can be used.

Answer 2

Time's ticking as you coded. I just fixed setInterval . This runs when putting function not putting strings.

 Number.prototype.pad = function(n) { for (var r = this.toString(); r.length < n; r = 0 + r); return r; }; function updateClock() { var now = new Date(); //start my code var hasPlayed = false; //end my code var milli = now.getMilliseconds(), sec = now.getSeconds(), min = now.getMinutes(), hou = now.getHours(), mo = now.getMonth(), dy = now.getDate(), yr = now.getFullYear(); var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var tags = ["mon", "d", "y", "h", "m", "s", "mi"], corr = [months[mo], dy, yr, hou.pad(2), min.pad(2), sec.pad(2), milli]; console.log(corr) for (var i = 0; i < tags.length; i++) //document.getElementById(tags[i]).firstChild.nodeValue = corr[i]; //start my code if (hasPlayed == false && min == 57 && sec == 13 && milli >= 700) { hasPlayed = true; var song = new Audio('song.mp3'); song.play(); } else { hasPlayed = false; } //end my code } function initClock() { updateClock(); window.setInterval(() => updateClock(), 1); } initClock();